Vlastnosť flex

Vlastnosť flex je skratka pre flex-basis, flex-shrink a flex-grow.

Vzťahuje sa na: konkrétny flex box.

Poradie hodnôt nie je dôležité. Druhý a tretí parameter (flex-shrink, flex-basis) nie sú povinné.

Hodnoty

Pozri príslušné vlastnosti.

Predvolená hodnota: 0 1 auto.

Príklad

Majme 3 elementy. Šírka každého z nich je 200px a celkovo je to 600px, čo je viac ako šírka nadradeného kontajnera, ktorá je 300px. Priradíme pre prvý element šírku 200px, pre druhý element - 300px, pre tretí element - 100px. Všetky elementy majú hodnotu flex-basis rovnú 1, a flex-shrink - 1, 2, 3 podľa poradového čísla elementu:

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: 200px 1 1;
}
.elem2 {
  flex: 300px 1 2;
}
.elem3 {
  flex: 100px 1 3;
}

Результат:

Pozri tiež