Flex o flexbox CSS, come spiegato nella precedente lezione consente di creare layout molto più semplici da gestire grazie alle proprietà che si possono assegnare.
Analizziamo in dettaglio queste proprietà.
Display flex
Questa proprietà dei CSS serve ad impostare il contenitore padre in maniera flessibile.
Quindi tutti gli elementi che sono figli di un contenitore che possiedono la seguente proprietà potranno assumere determinati comportamenti dettati dall’elemento padre.
Se impostiamo questa proprietà possiamo applicare anche le seguenti proprietà sotto elencate.
Flex direction
Questa proprietà, che chiaramente funziona se l’elemento è flessibile, serve a specificare la direzione dell’asse principale (main-axis) dove si dispongono i box flessibili nel contenitore.
I valori possibili che si possono assegnare sono: row, row-reverse, column, column-reverse.
Quindi in definitiva gli elementi interni possono essere disposti orizzontalmente per righe (row) dove dunque il main-axis è l’asse orizzontale (l’asse x) oppure verticalmente per colonne (column) dove dunque il main-axis è l’asse verticale (l’asse y).
L’ordine può essere quello predefinito da sinistra verso destra oppure inverso (row-reverse e column-reverse).
Di seguito un semplicissimo esempio di utilizzo:
.flex-container {
display: flex;
flex-direction:column;
}
Al seguente link troverete una guida dettagliata di questa proprietà: https://www.codingcreativo.it/flex-direction/.
Flex wrap
Tramite questa proprietà, si specifica se i box all’interno del contenitore padre devono essere disposti su un’unica riga oppure su più righe, nel caso in cui il main-axis sia l’asse orizzontale.
Mentre nel caso in il main-axis sia l’asse verticale, si specifica se i box all’interno del contenitore possono essere disposti su più colonne.
I valori possibili sono: nowrap, wrap, wrap-reverse.
Sia per gli elementi disposti orizzontalmente, sia per gli elementi disposti verticalmente, il valore di default è nowrap. Ovvero gli elementi prendono tutto lo spazio necessario senza andare in una nuova riga o colonna.
Se specifichiamo invece il valore wrap, se il main-axis è l’asse orizzontale quando si raggiunge la fine della riga, automaticamente gli elementi successivi si posizionano sulla riga successiva. Allo stesso modo, se invece il main-axis è quello verticale quando si raggiunge la fine della colonna, automaticamente gli elementi successivi si posizionano sulla colonna successiva.
Se si utilizza wrap-reverse la disposizione degli elementi avviene in ordine inverso.
Ecco un semplice esempio d’utilizzo:
.flex-container {
display: flex;
flex-direction:column;
flex-wrap: wrap;
}
Al seguente link troverete una guida dettagliata di questa proprietà: https://www.codingcreativo.it/flex-wrap/.
Flex flow
Questa proprietà una proprietà di sintassi abbreviata per esprimere assieme le due proprietà flex-direction e flex-wrap.
Justify content
Justify-content è la proprietà che serve a stabilire come allineare i box flessibili sull’asse principale del contenitore. I valori ammissibili sono: flex-start, flex-end, center, space-between, space-around e space-evenly. Con queste proprietà lo spazio libero di fine riga può essere ridistribuito.
.flex-container {
display: flex;
flex-direction:row; /* valore di default, si può omettere */
justify-content: center;
}
Align items
align-items: questa proprietà, degli elementi flexbox, serve a stabilire come allineare i box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center e baseline.
Se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.
.flex-container {
display: flex;
flex-direction:row; /* valore di default, si può omettere */
justify-content: center;
align-items:stretch;
}
Align Content
Align-content è una proprietà che serve solo per i contenitori multi-riga. Infatti serve a stabilire come allineare una riga di box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center, baseline, space-between e space-around.
Anche qui se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.
Conclusioni
Nelle prossime lezioni continueremo ancora a parlare di flex parlando in dettaglio di tutte le proprietà elencate ed inoltre introdurremo le proprietà che si applicano ai box flessibili.
Alcuni link utili
Fogli di stile interni, esterni ed in linea
Come impostare le pseudo-classi