Cheat Sheet sul layout CSS Flexbox
Questa pagina fornisce una cheat sheet visiva del layout CSS Flexbox, comprese le proprietà del contenitore, le proprietà degli elementi e esempi comuni di layout.
Proprietà del Contenitore
| Proprietà | Valore | Descrizione |
|---|---|---|
display |
flex |
Abilita il layout flessibile |
flex-direction |
row |
L’asse principale è orizzontale, l’inizio è a sinistra |
row-reverse |
L’asse principale è orizzontale, l’inizio è a destra | |
column |
L’asse principale è verticale, l’inizio è in alto | |
column-reverse |
L’asse principale è verticale, l’inizio è in basso | |
flex-wrap |
nowrap |
Valore predefinito, gli elementi sono disposti su una riga |
wrap |
Gli elementi vanno a capo | |
wrap-reverse |
Gli elementi vanno a capo in senso inverso | |
justify-content |
flex-start |
Allineamento dell’asse principale: allineato a sinistra |
flex-end |
Allineamento dell’asse principale: allineato a destra | |
center |
Allineamento dell’asse principale: centrato | |
space-between |
Allineamento dell’asse principale: giustificato, con spazio uguale tra gli elementi | |
space-around |
Allineamento dell’asse principale: spazio uguale attorno agli elementi | |
align-items |
flex-start |
Allineamento dell’asse secondario: allineato in alto |
flex-end |
Allineamento dell’asse secondario: allineato in basso | |
center |
Allineamento dell’asse secondario: centrato | |
baseline |
Allineamento dell’asse secondario: allineato alla linea di base del testo | |
stretch |
Valore predefinito, allineamento dell’asse secondario: esteso per riempire il contenitore | |
align-content |
flex-start |
Allineamento dell’asse secondario (più righe): allineato in alto |
flex-end |
Allineamento dell’asse secondario (più righe): allineato in basso | |
center |
Allineamento dell’asse secondario (più righe): centrato | |
space-between |
Allineamento dell’asse secondario (più righe): giustificato, con spazio uguale tra le righe | |
space-around |
Allineamento dell’asse secondario (più righe): spazio uguale attorno alle righe | |
stretch |
Valore predefinito, allineamento dell’asse secondario (più righe): esteso per riempire lo spazio rimanente |
Proprietà degli Elementi (Items)
| Proprietà | Valore | Descrizione |
|---|---|---|
flex-grow |
numero |
Definisce il rapporto di ingrandimento dell’elemento, predefinito è 0 (non si ingrandisce) |
flex-shrink |
numero |
Definisce il rapporto di restringimento dell’elemento, predefinito è 1 |
flex-basis |
auto |
Definisce la dimensione predefinita dell’elemento prima della distribuzione dello spazio rimanente |
align-self |
auto |
Consente l’allineamento individuale di un elemento, sovrascrivendo align-items |
flex-start |
L’elemento è posizionato all’inizio del contenitore | |
flex-end |
L’elemento è posizionato alla fine del contenitore | |
center |
L’elemento è posizionato al centro | |
baseline |
L’elemento è allineato alla linea di base del contenitore | |
stretch |
L’elemento viene esteso per riempire il contenitore (se il contenitore ha un’altezza) |
Esempi Comuni di Layout
| Layout | Proprietà del Contenitore | Proprietà degli Elementi |
|---|---|---|
| Barra di navigazione orizzontale | display: flex;justify-content: space-around; |
|
| Barra laterale verticale | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Layout a griglia | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Layout a schede | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |