Sifat place-content

Sifat place-content menetapkan penjajaran elemen pada paksi utama dan silang untuk elemen fleksibel, dan pada paksi mendatar dan menegak untuk grid. Nilai pertama menentukan penjajaran pada paksi utama (mendatar), nilai kedua - pada paksi silang (menegak). Sifat ini digunakan pada elemen induk.

Sintaks

cssselector {
  place-content: paksi_utama paksi_silang;
}

Contoh . Penjajaran pada permulaan paksi utama dan pusat paksi silang

Sekarang elemen dilekatkan pada bahagian atas paksi utama dan secara serentak berada di tengah paksi silang:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: start center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Contoh . Penjajaran pada pusat paksi utama dan hujung paksi silang

Dan sekarang elemen terletak di tengah paksi utama dan di hujung paksi silang:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: center end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Contoh . Penjajaran pada hujung paksi utama dan permulaan paksi silang

Di sini elemen dilekatkan pada bahagian bawah paksi utama dan secara serentak ke permulaan paksi silang:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: end start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Contoh . Penjajaran pada permulaan paksi menegak dan hujung paksi mendatar dalam grid

Mari kita jajarkan elemen kita pada permulaan paksi menegak dan hujung paksi mendatar:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: start end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Contoh . Penjajaran pada pusat paksi menegak dan permulaan paksi mendatar dalam grid

Mari kita jajarkan elemen kita pada pusat paksi menegak dan permulaan paksi mendatar:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: center start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Contoh . Penjajaran pada hujung paksi menegak dan permulaan paksi mendatar dalam grid

Mari kita jajarkan elemen kita pada hujung paksi menegak dan permulaan paksi mendatar:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: end start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Lihat juga