Flex-grow xususiyati

flex-grow xususiyati alohida flex-blok kerak bo'lganda qo'shni elementlardan qancha katta bo'lishi mumkinligini belgilaydi.

Masalan, agar flex-konteyner ichidagi barcha flex-bloklar flex-grow:1 ga ega bo'lsa, ular teng o'lchamda bo'ladilar. Agar ulardan biri flex-grow:2 ga ega bo'lsa, u boshqalarga qaraganda 2 baravar katta bo'ladi.

Agar elementlarning umumiy kengligi ota elementning kengligidan kichik bo'lsa, o'ng tomonda bosh joy qoladi. Istasangiz, bu bosh joyni elementlar o'rtasida mutanosib taqsimlash mumkin. Bunga flex-grow xususiyati yordamida erishiladi, u flex-elementlarga beriladi. Bu xususiyatning qiymati o'lchamsiz sondir.

Qo'llanilishi: aniq flex blokga.

Bu xususiyat flex qisqartirilgan xususiyatning tarkibiy qismi hisoblanadi.

Sintaksis

cssselector {
  flex-grow: musbat son;
}

Standart qiymati: 0.

Misol

Hozirda bizda kengligi 100px bo'lgan ikkita flex-blok bor. Ularning umumiy kengligi 200px, ota elementning kengligi esa - 300px. Demak, 100px bo'sh joy qolmoqda.

Agar elementlarga flex-grow berilmagan bo'lsa, biz shunchaki bu bo'sh joyni ko'ramiz. Agar berilgan bo'lsa, elementlarning haqiqiy kengligi belgilanganidan katta bo'ladi - ular bo'sh joyni o'zaro mutanosib taqsimlab, o'z kengligiga qo'shadilar.

Misol uchun, birinchi elementning flex-grow qiymati 1, ikkinchisiniki esa - 3 bo'lsin. Keling, har bir element qancha bo'sh joy olishini hisoblaylik.

Avvalo, barcha elementlarning flex-grow birliklari yig'indisini topish kerak. Birinchi elementniki 1, ikkinchisiniki esa 3. Bu yig'indi 4 ekanligini anglatadi.

Endi 100px bo'sh joyni 4 ga bo'lamiz va har bir flex-grow birligiga 25px to'g'ri kelishini topamiz. Demak, birinchi elementga bitta flex-grow birligi, ya'ni 25px qo'shiladi, ikkinchisiga esa uchta birlik, ya'ni 75px qo'shiladi.

Birinchi elementning kengligi 125px, ikkinchisiniki esa 175px bo'ladi:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 3;
}

Результат:

Misol

Endi ota elementning kengligi 400px, birinchi elementning kengligi 200px, ikkinchi elementning kengligi esa - 100px bo'lsin. Demak, bo'sh joy yana 100px ga teng.

Keling, har bir elementga flex-grow qiymatini 1 deb belgilaylik. Yig'indi 2 bo'ladi, demak 100px bo'sh joyni 2 ga bo'lish kerak. Har bir birlik uchun 50px to'g'ri keladi.

flex-grow qiymati barcha elementlar uchun bir xil bo'lgani uchun, barcha elementlarga 50px qo'shiladi. Bu birinchi element 250px, ikkinchi element esa 150px bo'lishini anglatadi:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent  {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Misol

Yana ota elementning kengligi 400px, birinchi elementning kengligi 200px, ikkinchi elementning kengligi esa - 100px bo'lsin.

Keling, endi birinchi elementning flex-grow qiymatini 3, ikkinchisiniki esa 1 deb belgilaylik. Yig'indi 4 bo'ladi. Bitta birlik uchun 100px / 4 = 25px to'g'ri keladi.

Birinchi elementga 75px qo'shiladi, u 275px bo'ladi, ikkinchisiga esa 25px qo'shiladi, u 125px bo'ladi:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent  {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Shuningdek qarang