Cheat Sheet aspect CSS Flexbox
Această pagină oferă un cheat sheet vizual pentru aspectul CSS Flexbox, incluzând proprietățile containerului, proprietățile elementelor și exemple comune de aspect.
Proprietăți Container
| Proprietate | Valoare | Descriere |
|---|---|---|
display |
flex |
Activează aspectul 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 |
Valoare implicită, elementele sunt aranjate pe o singură linie |
wrap |
Elementele trec pe linia următoare | |
wrap-reverse |
Elementele trec pe linia următoare în sens invers | |
justify-content |
flex-start |
Alinierea axei principale: aliniat la stânga |
flex-end |
Alinierea axei principale: aliniat la dreapta | |
center |
Alinierea axei principale: centrat | |
space-between |
Alinierea axei principale: justificat, cu spațiu egal între elemente | |
space-around |
Alinierea axei principale: spațiu egal în jurul fiecărui element | |
align-items |
flex-start |
Alinierea axei secundare: aliniat sus |
flex-end |
Alinierea axei secundare: aliniat jos | |
center |
Alinierea axei secundare: centrat | |
baseline |
Alinierea axei secundare: aliniat pe linia de bază a textului | |
stretch |
Valoare implicită, alinierea axei secundare: întins pentru a umple containerul | |
align-content |
flex-start |
Alinierea axei secundare (mai multe linii): aliniat sus |
flex-end |
Alinierea axei secundare (mai multe linii): aliniat jos | |
center |
Alinierea axei secundare (mai multe linii): centrat | |
space-between |
Alinierea axei secundare (mai multe linii): justificat, cu spațiu egal între linii | |
space-around |
Alinierea axei secundare (mai multe linii): spațiu egal în jurul liniilor | |
stretch |
Valoare implicită, alinierea axei secundare (mai multe linii): întins pentru a umple spațiul rămas |
Proprietăți Elemente (Items)
| Proprietate | Valoare | Descriere |
|---|---|---|
flex-grow |
număr |
Definește proporția de mărire a elementului, valoarea implicită este 0 (nu se mărește) |
flex-shrink |
număr |
Definește proporția de micșorare a elementului, valoarea implicită este 1 |
flex-basis |
auto |
Definește dimensiunea implicită a elementului înainte de distribuirea spațiului rămas |
align-self |
auto |
Permite alinierea individuală a unui element, suprascriind proprietatea align-items |
flex-start |
Elementul este plasat la începutul containerului | |
flex-end |
Elementul este plasat la sfârșitul containerului | |
center |
Elementul este plasat la mijloc | |
baseline |
Linia de bază a elementului este aliniată cu linia de bază a containerului | |
stretch |
Elementul se întinde pentru a umple containerul (dacă containerul are înălțime) |
Exemple comune de aspect
| Aspect | Proprietăți Container | Proprietăți Elemente |
|---|---|---|
| Bară de navigare orizontală | display: flex;justify-content: space-around; |
|
| Bară laterală verticală | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Aspect grilă | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Aspect carduri | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |