A flex-shrink tulajdonság

A flex-shrink tulajdonság határozza meg, hogy egy flex blokk mennyire zsugorodik össze a szomszédos elemekhez képest a flex konténeren belül, ha nincs elég szabad hely.

Például, ha minden flex blokk a flex konténeren belül flex-shrink:1 értékkel rendelkezik, akkor egyforma méretűek lesznek. Ha az egyiknek flex-shrink:2 az értéke, akkor az 2 alkalommal kisebb lesz, mint az összes többi.

Alkalmazása: egyedi flex blokkra.

Ez a tulajdonság részeként szerepel a rövidített tulajdonságnak, a flex-nek.

Szintaxis

cssselector {
  flex-shrink: pozitív szám;
}

Alapértelmezett érték: 1.

Példa

Tegyük fel, hogy 3 elemünk van. Mindegyik szélessége 200px, összesen tehát 600px, ami több, mint a szülői konténer szélessége, amely 350px:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">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;
}

Результат:

Számítsuk ki a negatív szabad teret a képlet segítségével:

Az elemek súlyozott szélességének összege a flex-shrink tulajdonság értékeinek figyelembevételével minden elem esetében:

Most határozzuk meg, mennyire zsugorodik az első elem:

A második elem:

A harmadik elem:

Kiderül, hogy a harmadik elem, amelynek a flex-shrink értéke 3, jobban zsugorodik, mint a többi elem.

Lásd még