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:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.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

proprietatea flex-direction,
care stabilește direcția axelor blocurilor flex
proprietatea justify-content,
care stabilește alinierea de-a lungul axei principale
proprietatea align-items,
care stabilește alinierea de-a lungul axei transversale
proprietatea flex-wrap,
care stabilește afișarea pe mai multe rânduri a blocurilor flex
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea blocurilor flex
proprietatea align-self,
care stabilește alinierea unui singur bloc
proprietatea flex-basis,
care stabilește dimensiunea unui anumit bloc flex
proprietatea flex-grow,
care stabilește "lăcomia" blocurilor flex
proprietatea flex-shrink,
care stabilește compresibilitatea blocurilor flex