Kako funkcionišu svojstva flex-grow i 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). Овај слободан простор ће бити расподељен међу елементима 1, 2 и 3 у односу на њихов 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 већим од 0, пропорционално њиховој 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: расподељује негативан слободан простор (потреба за смањењем).

Kako funkcionišu svojstva flex-grow i flex-shrink?