place-content xususiyati

place-content xususiyati flex elementlar uchun asosiy va ko'ndalang o'qlar bo'yicha, gridlar uchun esa gorizontal va vertikal o'qlar bo'yicha tekislashni belgilaydi. Birinchi qiymat sifatida asosiy (gorizontal) o'q bo'yicha tekislash, ikkinchi qiymat sifatida - ko'ndalang (vertikal) o'q bo'yicha tekislash ko'rsatiladi. Ushbu xususiyat ota elementga qo'llaniladi.

Sintaksis

cssselector {
  place-content: asosiy_o'q ko'ndalang_o'q;
}

Misol . Asosiy o'q boshiga va ko'ndalang o'q markaziga tekislash

Hozir elementlar asosiy o'qning yuqori qismiga joylashtirilgan va shu bilan birga ko'ndalang o'q markazida joylashgan:

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

Результат:

Misol . Asosiy o'q markaziga va ko'ndalang o'q oxiriga tekislash

Endi esa elementlar asosiy o'q markazida va ko'ndalang o'q oxirida joylashgan:

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

Результат:

Misol . Asosiy o'q oxiriga va ko'ndalang o'q boshiga tekislash

Bu yerda elementlar asosiy o'qning pastki qismiga va shu bilan birga ko'ndalang o'q boshiga joylashtirilgan:

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

Результат:

Misol . Gridda vertikal o'q boshiga va gorizontal o'q oxiriga tekislash

Keling, elementlarimizni vertikal o'q boshiga va gorizontal o'q oxiriga tekislaylik:

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

Результат:

Misol . Gridda vertikal o'q markaziga va gorizontal o'q boshiga tekislash

Keling, elementlarimizni vertikal o'q markaziga va gorizontal o'q boshiga tekislaylik:

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

Результат:

Misol . Gridda vertikal o'q oxiriga va gorizontal o'q boshiga tekislash

Keling, elementlarimizni vertikal o'q oxiriga va gorizontal o'q boshiga tekislaylik:

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

Результат:

Shuningdek qarang