Својство flex-shrink

Својство flex-shrink одређује то, колико ће се flex-блок смањити у односу на суседне елементе унутар flex-контејнера у случају недостатка слободног простора.

На пример, ако сви flex-блокови унутар flex-контејнера имају flex-shrink:1, онда ће они бити једнаке величине. Ако један од њих има flex-shrink:2, онда ће бити 2 пута мањи од свих осталих.

Примењује се на: конкретан flex блок.

Ово својство улази као саставни део у скраћеницу својства flex.

Синтакса

cssселектор {
  flex-shrink: позитиван број;
}

Подразумевана вредност: 1.

Пример

Претпоставимо да имамо 3 елемента. Ширина сваког од њих износи 200px и укупно једнака је 600px, што је више од ширине родитељског контејнера, која једнака је 350px:

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

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex-shrink: 1;
}
.elem2 {
  flex-shrink: 2;
}
.elem3 {
  flex-shrink: 3;
}

Результат:

Израчунајмо негативан слободни простор помоћу формуле:

Укупна пондерисана ширина елемената узевши у обзир вредности својства flex-shrink за сваки елемент биће једнака:

Сада одредимо колико ће се смањити први елемент:

Други елемент:

Трећи елемент:

Излази да ће се трећи елемент, чија је вредност flex-shrink једнака 3 смањити више од других елемената.

Погледајте такође