Place-content aýratynlygy

place-content aýratynlygy fleks elementleri üçin esasy we gola eksenleri boýunça, gridler üçin bolsa ýatay we şaquly eksenler boýunça elementleri deňleýär. Ilkinji baha esasy (ýatay) eksen boýunça deňleşme, ikinji baha bolsa gola (şaquly) eksen boýunça deňleşme görkezilýär. Aýratynlyk ata elementine ýüzlenýär.

Sintaksis

cssselektor {
  place-content: esasy_eksen gola_eksen;
}

Mysal . Esasy ekseniň başlangyjy we gola ekseniň merkezi boýunça deňleme

Häzirki wagtda elementler esasy ekseniň ýokarky bölegine ýygnandyrylan we şol bir wagtyň özünde gola ekseniň merkezinde ýerleşýär:

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;
}

Результат:

Mysal . Esasy ekseniň merkezi we gola ekseniň soňy boýunça deňleme

Indi bolsa elementler esasy ekseniň merkezinde we gola ekseniň ahyrynda ýerleşýär:

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;
}

Результат:

Mysal . Esasy ekseniň ahyry we gola ekseniň başy boýunça deňleme

Şu ýerde elementler esasy ekseniň aşaky bölegine we şol bir wagtyň özünde gola ekseniň başyna ýygnandyrylan:

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;
}

Результат:

Mysal . Gridde şaquly ekseniň başy we ýatay ekseniň ahyry boýunça deňleme

Geliň, elementlerimizi şaquly ekseniň başy we ýatay ekseniň ahyry boýunça deňleýeliň:

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;
}

Результат:

Mysal . Gridde şaquly ekseniň merkezi we ýatay ekseniň başy boýunça deňleme

Geliň, elementlerimizi şaquly ekseniň merkezi we ýatay ekseniň başy boýunça deňleýeliň:

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;
}

Результат:

Mysal . Gridde şaquly ekseniň ahyry we ýatay ekseniň başy boýunça deňleme

Geliň, elementlerimizi şaquly ekseniň ahyry we ýatay ekseniň başy boýunça deňleýeliň:

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;
}

Результат:

Şeýle-de görüň