Svojstvo flex-shrink

Svojstvo flex-shrink određuje to, koliko će se flex-blok smanjivati u odnosu na susedne elemente unutar flex-kontejnera u slučaju nedostatka slobodnog prostora.

Na primer, ako svi flex-blokovi unutar flex-kontejnera imaju flex-shrink:1, onda će oni biti jednake veličine. Ako jedan od njih ima flex-shrink:2, onda će on biti 2 puta manji od svih ostalih.

Primenjuje se na: konkretni flex blok.

Ovo svojstvo ulazi kao sastavni deo u skraćeno svojstvo flex.

Sintaksa

cssselektor {
  flex-shrink: pozitivan broj;
}

Podrazumevana vrednost: 1.

Primer

Neka imamo 3 elementa. Širina svakog od njih iznosi 200px i ukupno je jednaka 600px, što je više od širine roditeljskog kontejnera, koja iznosi 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;
}

Результат:

Hajde da izračunamo negativni slobodni prostor pomću formule:

Zbirna ponderisana širina elemenata uzimajući u obzir vrednosti svojstva flex-shrink za svaki element će biti jednaka:

Sada određujemo koliko će se smanjiti prvi element:

Drugi element:

Treći element:

Ispada da će se treći element, kod koga vrednost flex-shrink iznosi 3, smanjiti više od ostalih elemenata.

Pogledajte takođe