Il Flex container è un elemento HTML a cui viene applicato display:flex. Questo trasforma i suoi elementi figli diretti in Flex item, che possono essere disposti e allineati con precisione utilizzando diverse proprietà.
Abbiamo parlato della differenza tra Flex container e Flex item nella lezione sul Flexbox.
In questa lezione, vediamo quali sono e come funzionano le seguenti proprietà CSS per i Flex container:
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentrow-gap, column-gap e gapQuesta proprietà definisce la direzione principale lungo cui i Flex item si dispongono all'interno del Flex container.
I valori possibili sono quattro:
row (default): gli elementi sono disposti in fila, da sinistra a destra..flex-container {
display: flex;
flex-direction: row;
}row-reverse: gli elementi sono disposti in fila, ma da destra a sinistra..flex-container {
display: flex;
flex-direction: row-reverse;
}column: gli elementi sono disposti in colonna, dall'alto verso il basso.flex-container {
display: flex;
flex-direction: column;
}column-reverse: gli elementi sono disposti in colonna, ma dal basso verso l'alto..flex-container {
display: flex;
flex-direction: column-reverse;
}La proprietà flex-wrap specifica se gli elementi devono restare su una sola linea o se possono andare a capo se lo spazio non è sufficiente.
I valori possibili sono tre:
nowrap (default): tutti gli elementi rimangono su una sola riga..flex-container {
display: flex;
flex-wrap: nowrap;
overflow: auto; /* Permette lo scorrimento */
}wrap: gli elementi vanno a capo se necessario..flex-container {
display: flex;
flex-wrap: wrap;
}wrap-reverse: gli elementi vanno a capo, ma invertendo l'ordine delle righe o delle colonne..flex-container {
display: flex;
flex-wrap: wrap-reverse;
}La proprietà flex-flow è un'abbreviazione che combina flex-direction e flex-wrap. Permette di impostare entrambe le proprietà con un'unica dichiarazione.
La sintassi è: flex-flow: direction wrap. Usa i valori di flex-direction per il parametro direction e usa i valori di flex-wrap per il parametro wrap.
Ecco un esempio che unisce flex-direction:row e flex-wrap:wrap:
.flex-container {
display: flex;
flex-flow: row wrap;
}La proprietà justify-content allinea i Flex item lungo l'asse principale (definito da flex-direction). Ad esempio, permette di allineare tutti gli elementi al centro della riga, a destra o a sinistra.
La proprietà justify-content accetta sei valori:
flex-start (default): gli elementi sono allineati all'inizio del contenitore..flex-container {
display: flex;
justify-content: flex-start;
}flex-end: gli elementi sono allineati alla fine del contenitore..flex-container {
display: flex;
justify-content: flex-end;
}center: gli elementi sono centrati nel contenitore..flex-container {
display: flex;
justify-content: center;
}space-between: gli elementi sono distribuiti equamente, con dello spazio tra di loro..flex-container {
display: flex;
justify-content: space-between;
}space-around: gli elementi sono distribuiti equamente, con spazio uguale intorno a ciascun elemento..flex-container {
display: flex;
justify-content: space-around;
}space-evenly: gli elementi sono distribuiti con spazi uguali tra loro e ai bordi del contenitore..flex-container {
display: flex;
justify-content: space-evenly;
}La proprietà align-items allinea i Flex item in verticale se è stato impostato flex-direction:row o in orizzontale se è stato impostato flex-direction:column. Possiamo chiamare l'asse di riferimento asse trasversale (perpendicolare all'asse principale), in quanto non la conosciamo a priori.
La proprietà align-items accetta cinque valori (in questi esempi, il Flex container avrà un'altezza di 150px per vedere la differenza nei valori):
stretch (default): gli elementi si allungano per riempire il contenitore (se non hanno un'altezza specificata)..flex-container {
display: flex;
height: 150px;
align-items: stretch;
}flex-start: gli elementi sono allineati all'inizio dell'asse trasversale..flex-container {
display: flex;
height: 150px;
align-items: flex-start;
}flex-end: gli elementi sono allineati alla fine dell'asse trasversale..flex-container {
display: flex;
height: 150px;
align-items: flex-end;
}center: gli elementi sono centrati lungo l'asse trasversale..flex-container {
display: flex;
height: 150px;
align-items: center;
}baseline: gli elementi sono allineati in base alla loro linea di base del testo. La linea di base del testo è la linea su cui appoggiano le lettere del testo. Nell'esempio, abbiamo scelto tre diverse dimensioni del testo per evidenziare come i Flex item sono allineati in base alla linea di testo..flex-container {
display: flex;
height: 150px;
align-items: baseline;
}La proprietà align-content allinea le righe del Flex container quando ci sono più righe di elementi, quindi quando è impostato flex-wrap:wrap.
Per provare come funzionano i valori di questa proprietà, consigliamo un Flex container che abbia queste proprietà CSS (per l'altezza, che deve essere consistente, non possiamo inserire qui gli esempi per ogni valore):
.flex-container {
display: flex;
height: 1000px;
background-color: lightgreen;
flex-wrap: wrap;
}I valori accettati da align-content sono sei:
stretch (default): le righe si allungano (se possibile) per riempire lo spazio disponibile. Se non possibile, rimane lo spazio alla fine delle righe..flex-container {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}flex-start: le righe sono allineate all'inizio del contenitore..flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}flex-end: le righe sono allineate alla fine del contenitore..flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}center: le righe sono centrate all'interno del contenitore..flex-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}space-between: le righe sono distribuite equamente, con spazio tra di loro..flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}space-around: le righe sono distribuite equamente, con spazio intorno a ciascuna riga..flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}Le proprietà gap, row-gap, column-gap definiscono lo spazio tra i Flex item all'interno del contenitore. Lo spazio è soltanto tra i Flex item, non tra gli elementi e il bordo del Flex container.
gap: definisce lo spazio sia tra le righe che tra le colonne.row-gap: definisce lo spazio tra le righe.column-gap: definisce lo spazio tra le colonne.Tutte queste tre proprietà accettano qualsiasi unità di misura, come i px, em, ecc.
Ad esempio, in questo caso aggiungiamo gap:30px tra gli elementi:
.flex-container {
display: flex;
gap: 30px;
}Per allineare un elemento al centro di un altro elemento, possiamo utilizzare le proprietà CSS di Flexbox che abbiamo appena visto. Oltre a Flexbox, comunque, esistono altri metodi che abbiamo visto nella lezione su come allineare gli elementi.
Per allineare un elemento al centro, sia in orizzontale che in verticale, abbiamo bisogno di due proprietà:
.flex-container {
display: flex;
height: 150px;
justify-content: center;
align-items: center;
}