Flex, guida all'uso della tecnologia flex css, Flexbox

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.

Banner Pubblicitario

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.

Banner pubblicitario

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.

Lezione precedente: introduzione ai flexbox CSS

Lezione successiva: proprietà dei box flessibili