Řízení komprese flexboxů v CSS

Ve výchozím nastavení se ze všech prvků ukusují kousky úměrné šířce prvku. Lze však zařídit, aby se z některých prvků ukusovaly větší nebo menší kousky. K tomu slouží speciální vlastnost flex-shrink.

Tato vlastnost představuje určitou váhu, kterou se vynásobí šířka prvku při výpočtu ukousávaného kousku pomocí již výše uvedeného vzorce. Například, pokud je šířka prvku 200px a jeho flex-shrink je 3, pak vážená (tj. vynásobená váhou) šířka prvku bude:

200px * 3 = 600px

Vzorec s ohledem na flex-shrink bude vypadat následovně: záp. volný prostor * (vážená šířka prvku / součet všech vážených šírek prvků).

Podívejme se na příklad. Předpokládejme, že máme 4 prvky. Nechť šířka prvního prvku je 400px a flex-shrink je 2, šířka zbývajících prvků - 200px a jejich flex-shrink je 1. Nechť šířka rodiče je 900px.

Celková šířka prvků je:

400px + 3 * 200px = 1000px

Záporný volný prostor bude:

1000px - 900px = 100px

Celková vážená šířka prvků je:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Vážená šířka prvního prvku je:

400px * 2 = 800px

Z prvního prvku se ukousne následující kousek:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Šířka prvku bude:

400px - 57.14px = 342.86px ~ 343px

Vážená šířka každého ze zbývajících prvků je:

200px * 1 = 200px

Z každého prvku se ukousne následující kousek:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Šířka prvku bude:

200px - 14.2px = 185.8px ~ 186px

Задание 1

Realizujte popsané bloky a ověřte měřením, že šířka prvků bude skutečně rovna vypočítané hodnotě.

Задание 2

Vypočítejte šířku bloků a poté ověřte výpočty měřením:

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: 200px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-shrink: 2;
}
.elem2 {
  width: 100px;
  flex-shrink: 1;
}
.elem3 {
  width: 100px;
  flex-shrink: 1;
}

Задание 3

Vypočítejte šířku bloků a poté ověřte výpočty měřením:

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: 200px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-shrink: 3;
}
.elem2 {
  width: 100px;
  flex-shrink: 2;
}
.elem3 {
  width: 100px;
  flex-shrink: 1;
}

Задание 4

Vypočítejte šířku bloků a poté ověřte výpočty měřením:

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

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