place-content касиети

place-content касиети флекс элементтери үчүн элементтерди негизги жана көлдөө огу боюнча, ал эми гриддер үчүн горизонталдык жана вертикалдык огу боюнча ровдоону белгилейт. Биринчи мааниси негизги (горизонталдык) огу боюнча ровдоону, экинчи мааниси көлдөө (вертикалдык) огу боюнча ровдоону көрсөтөт. Бул касиет ата-эне элементке колдонулат.

Синтаксис

cssселектор {
  place-content: негизги_огу көлдөө_огу;
}

Мисал . Негизги огунун башын жана көлдөө огунун борборун ровдоо

Азыр элементтер негизги огунун жогорку бөлүгүнө басылып, ошол эле учурда көлдөө огунун борборунда турат:

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

Результат:

Мисал . Негизги огунун борборун жана көлдөө огунун аягын ровдоо

Эми элементтер негизги огунун борборунда жана көлдөө огунун аягында жайгашкан:

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

Результат:

Мисал . Негизги огунун аягын жана көлдөө огунун башын ровдоо

Бул жерде элементтер негизги огунун төмөнкү бөлүгүнө басылып, ошол эле учурда көлдөө огунун башына басылышат:

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

Результат:

Мисал . Гридде вертикалдык огунун башын жана горизонталдык огунун аягын ровдоо

Келгиле, биздин элементтерди вертикалдык огунун башы жана горизонталдык огунун аягы боюнча ровдойлу:

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

Результат:

Мисал . Гридде вертикалдык огунун борборун жана горизонталдык огунун башын ровдоо

Келгиле, биздин элементтерди вертикалдык огунун борбору жана горизонталдык огунун башы боюнча ровдойлу:

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

Результат:

Мисал . Гридде вертикалдык огунун аягын жана горизонталдык огунун башын ровдоо

Келгиле, биздин элементтерди вертикалдык огунун аягы жана горизонталдык огунун башы боюнча ровдойлу:

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

Результат:

Ошондой эле караңыз