flex-grow касиети

flex-grow касиети, эгер керек болсо, жалгыз flex-блок кошуна элементтерден канчага чоңураак болушу мүмкүн экенин аныктайт.

Мисалы, эгерде flex-контейнердин ичиндеги бардык flex-блоктор flex-grow:1 болсо, анда алар бирдей өлчөмдө болот. Эгер алардын бири flex-grow:2 болсо, ал калгандарынан 2 эсе чоң болот.

Эгер элементтердин жалпы туурасы ата-энесиникинен кичине болсо, оң жакта бош орун калат. Каалаганда, бул бош орунду элементтерибиздин арасына пропорционалдуу бөлүшүүгө болот. Бул flex-grow касиети аркылуу жасалат, флекс-элементтерге берилет. Бул касиеттин мааниси өлчөмсүз сан болуп саналат.

Колдонулат: белгилүү бир flex блогуна.

Бул касиет кыскартылган касиеттин курамына flex кирет.

Синтаксис

cssтандоочу {
  flex-grow: оң сан;
}

Демейки мааниси: 0.

Мисал

Азыр бизде эки флекс-блок бар, алардын туурасы 100px. Алардын жалпы туурасы 200px, ал эми ата-энесиники - 300px. Натыйжада, 100px бош орун калды.

Эгер элементтерге flex-grow берилбесе, анда биз жөн гана бул бош орунду көрөбүз. Эгер ал берилсе, анда элементтердин чыныгы туурасы берилгенинен чоңураак болот - алар пропорционалдуу түрдө бош орунду өз ара бөлүшүп алышат жана аны өздөрүнүн туурасына кошушат.

Мисал үчүн, биринчи элементтин flex-grow 1, экинчисиники - 3 болсун. Келгиле, ар бир элемент канча бош орун аларын эсептеп чыгалы.

Адегенде, биздин бардык элементтерибиздин flex-grow бирдиктеринин жалпы санын табабыз. Биринчи элемент үчүн ал 1, ал эми экинчиси үчүн - 3. Бул жалпы суммасы 4 дегенди билдирет.

Эми 100px бош орунду 4 ке бөлүп, flex-grow бирдигине 25px туура келет. Натыйжада, биринчи элементке бир flex-grow бирдиги, башкача айтканда 25px, ал эми экинчи элементке - үч бирдик, башкача айтканда 75px кошулат.

Биринчи элементтин туурасы 125px болот, экинчисиники - 175px:

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

Результат:

Мисал

Эми ата-энесинин туурасы 400px болсун, биринчи элементтин туурасы 200px, ал эми экинчи элементтин туурасы - 100px. Натыйжада, бош орун дагы эле 100px барабар.

Келгиле, ар бир элементке 1 барабар flex-grow белгилейли. Жалпы суммасы 2 болот, демек 100px бош орун 2 кө бөлүнүшү керек. Бир ач көздүк бирдигине 50px туура келет.

Бардык элементтер бирдей маанидеги flex-grow болгондуктан, бардык элементтерге 50px бирдей маани кошулат. Бул биринчи элемент 250px, ал эми экинчи элемент 150px болот дегенди билдирет:

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

Результат:

Мисал

Дагы бир жолу ата-энесинин туурасы 400px болсун, биринчи элементтин туурасы 200px, ал эми экинчи элементтин туурасы - 100px.

Эми биринчи элементке flex-grow маанисин 3, экинчисине - 1 кылып белгилейли. Натыйжада, жалпы ач көздүк 4 барабар болот. Анда бир ач көздүк бирдиги 100px / 4 = 25px барабар.

Биринчи элементке 75px кошулат, жана ал 275px болот, ал эми экинчисине - 25px кошулуп, ал 125px болот:

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

Результат:

Дагы караңыз