Schema riassuntivo del Layout CSS Flexbox
Questa pagina fornisce uno schema riassuntivo visivo per il layout CSS Flexbox, incluse le proprietà del contenitore, le proprietà degli elementi e gli esempi comuni di layout.
Proprietà del Contenitore (Container)
| Proprietà | Valore | Descrizione |
|---|---|---|
display |
flex |
Abilita il layout flessibile |
flex-direction |
row |
L’asse principale è orizzontale, inizio a sinistra |
row-reverse |
L’asse principale è orizzontale, inizio a destra | |
column |
L’asse principale è verticale, inizio in alto | |
column-reverse |
L’asse principale è verticale, inizio in basso | |
flex-wrap |
nowrap |
Predefinito: gli elementi sono su una singola riga |
wrap |
Gli elementi vanno a capo su più righe | |
wrap-reverse |
Gli elementi vanno a capo in ordine inverso | |
justify-content |
flex-start |
Allineamento asse principale: Allineamento a sinistra |
flex-end |
Allineamento asse principale: Allineamento a destra | |
center |
Allineamento asse principale: Centrato | |
space-between |
Allineamento asse principale: Distribuzione uniforme; primo elemento all’inizio, ultimo alla fine | |
space-around |
Allineamento asse principale: Distribuzione uniforme con spazio uguale attorno agli elementi | |
align-items |
flex-start |
Allineamento asse trasversale: Allineato in alto |
flex-end |
Allineamento asse trasversale: Allineato in basso | |
center |
Allineamento asse trasversale: Centrato | |
baseline |
Allineamento asse trasversale: Allineato alla linea di base del testo | |
stretch |
Predefinito: Gli elementi si estendono per riempire il contenitore | |
align-content |
flex-start |
Allineamento asse trasversale (multi-riga): In alto |
flex-end |
Allineamento asse trasversale: In basso | |
center |
Allineamento asse trasversale: Centrato | |
space-between |
Allineamento asse trasversale: Distribuzione uniforme; prima riga in alto, ultima in basso | |
space-around |
Allineamento asse trasversale: Distribuzione uniforme con spazio uguale attorno alle righe | |
stretch |
Predefinito: Le righe si estendono per riempire lo spazio rimanente |
Proprietà degli Elementi (Items)
| Proprietà | Valore | Descrizione |
|---|---|---|
flex-grow |
number |
Definisce la capacità di un elemento di crescere se necessario (predefinito 0) |
flex-shrink |
number |
Definisce la capacità di un elemento di restringersi se necessario (predefinito 1) |
flex-basis |
auto |
Definisce la dimensione predefinita di un elemento prima della distribuzione dello spazio rimanente |
align-self |
auto |
Consente di sovrascrivere l’allineamento predefinito per i singoli elementi |
flex-start |
Allineamento all’inizio del contenitore | |
flex-end |
Allineamento alla fine del contenitore | |
center |
Centrato nel contenitore | |
baseline |
Allineato alla linea di base | |
stretch |
Esteso per riempire il contenitore |
Esempi Comuni di Layout
| Layout | Proprietà del Contenitore | Proprietà degli Elementi |
|---|---|---|
| Navigazione Orizzontale | display: flex;justify-content: space-around; |
|
| Barra Laterale Verticale | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Layout a Griglia (Grid) | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Layout a Schede (Cards) | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |