Sunt două proprietăți principale pentru aliniere într-un flex: justify-content și align-items.
justify-content setează alinierea pe direcția flexului (direcția setată cu flex-direction).
Iată câteva valori pe care le-am folosit eu:
flex-direction: row;flex-direction: column;align-items setează alinierea pe direcția perpendiculară flexului, pentru toate elementele.
Iată câteva valori pe care le-am folosit eu:
flex-direction: row;Am observat că foarte mulți confundă alinierea baseline cu flex-end.
baseline face să se alinieze prima linie de text între elementele din flex.
De cele mai multe ori, probabil vom avea nevoie de flex-end, care aliniază elementele în partea de jos.
flex-direction: column;Putem seta alinierea fiecărui element din flex în parte folosind align-self. Valorile pe care le acceptă sunt aceleași ca align-items.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Această proprietate se aplică numai la containerele flex cu mai multe linii, în cazul în care flex-wrap: wrap | wrap-reverse).
Un container flexibil cu o singură linie (adică atunci când flex-wrap este setat la valoarea implicită: no-wrap) nu va permite align-content.
Când vrem să controlăm cum sunt aliniate toate rândurile într-un flex, folosim align-content, care are valori pe care le-am mai văzut:
flex-direction: row;Proprietățile flex-grow și flex-shrink se pun pe elementele din flex ce vrem să crească până nu mai au loc, respectiv să se micșoreze cât se poate de mult.
Valoarea atributului reprezintă un număr, fără unitate, care spune cât de mult crește sau se contractă. Zero înseamnă că nu se schimbă.
Exemplu flex-grow:
<a href="#" class="item" style="flex-grow: 0;">
flex-grow: 0
</a>
<a href="#" class="item" style="flex-grow: 1;">
flex-grow: 1
</a>
<a href="#" class="item" style="flex-grow: 2;">
flex-grow: 2
</a>
În cazul flex-shrink, nu am văzut vreodată folosite alte valori decât 1 și 0, dar dacă ajungi să găsești un exemplu practic să le folosești, te rog să îmi spui.
Elementele din flex se pot reordona individual folosind atributul order cu un număr ca valoare.
Atunci când browserul trebuie să afișeze elementele din flex, le va ordona după valoarea din order. Cum valoarea default este 0, e suficient să pui order: -1 pentru ca un element să fie primul, sau order: 1 pentru a muta elementul la sfârșit.
Poți pune valori mai mici decât -1 (-2, -3 etc.) și elementul cu cea mai mică valoare va fi afișat la început. La fel, poți pune valori mai mari decât 1 și elementul cu cea mai mare valoare va fi afișat la sfârșit.
Pentru accesibilitate, trebuie evitat și folosit doar când are sens și nu se poate implementa designul dorit altcumva.
© Toate drepturile rezervate. Programming Gurus SRL.