Listă recapitulativă CSS Flexbox Layout
Această pagină oferă o listă recapitulativă vizuală pentru layout-ul CSS Flexbox, inclusiv proprietățile containerului, proprietățile elementelor și exemple comune de layout.
Proprietăți Container
| Proprietate | Valoare | Descriere |
|---|---|---|
display |
flex |
Activează layout-ul flexibil |
flex-direction |
row |
Axa principală este orizontală, punctul de pornire la stânga |
row-reverse |
Axa principală este orizontală, punctul de pornire la dreapta | |
column |
Axa principală este verticală, punctul de pornire sus | |
column-reverse |
Axa principală este verticală, punctul de pornire jos | |
flex-wrap |
nowrap |
Implicit: elementele sunt pe o singură linie |
wrap |
Elementele trec pe mai multe linii | |
wrap-reverse |
Elementele trec pe mai multe linii în ordine inversă | |
justify-content |
flex-start |
Alinierea pe axa principală: Aliniere la stânga |
flex-end |
Alinierea pe axa principală: Aliniere la dreapta | |
center |
Alinierea pe axa principală: Centrat | |
space-between |
Alinierea pe axa principală: Distribuție uniformă; primul la început, ultimul la sfârșit | |
space-around |
Alinierea pe axa principală: Spațiu egal în jurul elementelor | |
align-items |
flex-start |
Alinierea pe axa secundară: Aliniere sus |
flex-end |
Alinierea pe axa secundară: Aliniere jos | |
center |
Alinierea pe axa secundară: Centrat | |
baseline |
Alinierea pe axa secundară: Aliniere după linia de bază a textului | |
stretch |
Implicit: Elementele se întind pentru a umple containerul | |
align-content |
flex-start |
Alinierea axei secundare (multi-linie): Sus |
flex-end |
Alinierea axei secundare: Jos | |
center |
Alinierea axei secundare: Centrat | |
space-between |
Alinierea axei secundare: Distribuție uniformă; prima linie sus, ultima jos | |
space-around |
Alinierea axei secundare: Spațiu egal în jurul liniilor | |
stretch |
Implicit: Liniile se întind pentru a ocupa spațiul rămas |
Proprietăți Elemente (Items)
| Proprietate | Valoare | Descriere |
|---|---|---|
flex-grow |
number |
Definește capacitatea unui element de a se mări (implicit 0) |
flex-shrink |
number |
Definește capacitatea unui element de a se micșora (implicit 1) |
flex-basis |
auto |
Definește dimensiunea implicită a unui element înainte de distribuirea spațiului |
align-self |
auto |
Permite suprascrierea alinierii implicite pentru elemente individuale |
flex-start |
Elementul este aliniat la începutul containerului | |
flex-end |
Elementul este aliniat la sfârșitul containerului | |
center |
Centrat în container | |
baseline |
Aliniat după linia de bază | |
stretch |
Întins pentru a umple containerul |
Exemple Comune de Layout
| Layout | Proprietăți Container | Proprietăți Elemente |
|---|---|---|
| Navigație orizontală | display: flex;justify-content: space-around; |
|
| Sidebar vertical | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Layout Grid | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Layout Carduri | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |