Proprietatea flex

Proprietatea flex este o prescurtare pentru flex-basis, flex-shrink și flex-grow.

Se aplică la: un anumit bloc flex.

Ordinea valorilor nu contează. Al doilea și al treilea parametru (flex-shrink, flex-basis) nu sunt obligatorii.

Valori

Vezi proprietățile corespunzătoare.

Valoare implicită: 0 1 auto.

Exemplu

Să presupunem că avem 3 elemente. Lățimea fiecăruia dintre ele este de 200px și în total este de 600px, ceea ce este mai mult decât lățimea containerului părinte, care este de 300px. Să atribuim primului element o lățime de 200px, celui de-al doilea element - 300px, iar pentru al treilea element - 100px. Pentru toate elementele să fie valoarea flex-basis egală cu 1, iar flex-shrink - 1, 2, 3 în conformitate cu numărul de ordine al elementului:

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;
}

Результат:

Vezi și