flex-grow жана flex-shrink мүнөздөмөлөрү кандай…

flex-grow элементтин контейнердеги бош бош орунду барган сайын канчалык күчтүү өсө алат деп аныктайт. Маңызы 0 (дефолттук) болсо, элемент өсө албайт. Позитивдүү маанилер башка flex элементтерине карата өсүү коэффициентин көрсөтөт ошол эле сапта.

flex-shrink элементтин жетишпеген бош орунда канчалык күчтүү кысылышы мүмкүн экенин аныктайт. Маңызы 1 (дефолттук) болсо, кысылышы мүмкүн. Маңызы 0 кысылышты тыяды. Позитивдүү маанилер башка flex элементтерине карата кысылыш коэффициентин көрсөтөт.

Мисал:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Контейнердин кеңдиги */
}

.item {
  flex-basis: 100px; /* Ар бир элементтин негизги өлчөмү */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Бос орундун 1 бөлүгүн алат */
  flex-shrink: 0; /* Кысылбайт */
}

.item-2 {
  flex-grow: 2; /* Бос орундун 2 бөлүгүн алат */
  flex-shrink: 1; /* Кысылышы мүмкүн */
}

.item-3 {
  flex-grow: 1; /* Бос орундун 1 бөлүгүн алат */
  flex-shrink: 1; /* Кысылышы мүмкүн */
}

Бул учурда жалпы негизги өлчөмдөр 300px түзөт (3 * 100px). Бос орун 100px (400px - 300px). Бул бош орун flex-grow катышында бөлүштүрүлөт: 1 + 2 + 1 = 4. Элемент 1 1/4 * 100px = 25px кошумча орун алат. Элемент 2 2/4 * 100px = 50px кошумча орун алат. Элемент 3 1/4 * 100px = 25px кошумча орун алат.

Анын акыркы өлчөмдөрү: Элемент 1: 100px + 25px = 125px Элемент 2: 100px + 50px = 150px Элемент 3: 100px + 25px = 125px

Эгер контейнердин кеңдиги жетишсиз болсо (мисалы, 200px), анда кысуу керек болот. Кысуу үчүн flex-shrink жана элементтердин учурдагы өлчөмдөрү эске алынат. Жетишпеген орун flex-shrink чоңдугуна карата бөлүштүрүлөт: алардын flex-shrink көбөйгөн жана учурдагы өлчөмдөрү (flex-basis эске алынып) боюнча пропорционалдуу бөлүштүрүлөт. Кысуу алгоритми көбүрөөк, бирок негизги идея — flex-shrink чоң жана учурдагы өлчөмү чоң элементтер көбүрөөк кысылат.

Мөөнөттүү маанилер flex-basis, flex-grow жана flex-shrink көбүнесе кыскача flex касиети катары колдонулат. Мисалы, flex: 1 1 auto; эквивалент flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Кеңдик бөлүштүрүүдө артыкчылык:

flex-basis: элементтин баштапкы өлчөмүн белгилейт.
flex-grow: оң бош кеңдикти бөлүштүрөт.
flex-shrink: теріс бош кеңдикти бөлүштүрөт (кысуу зарылдыгы).

flex-grow жана flex-shrink мүнөздөмөлөрү кандай иштейт?