CSS FLEXBOX

Con i flexbox (o più precisamente CSS Flexible Box Layout) funziona in modo intelligente e dinamico: il layout si adatta in modo flessibile al display utilizzato (Responsive Design). Lo spazio viene riempito o gli elementi vengono accostati tra loro in modo che tutto sia chiaramente visibile. Per fare questo lavoro, senza compromettere il layout desiderato, Flexbox lavora con due assi: l’asse orizzontale e l’asse verticale. Utilizzando questi assi gli elementi possono essere disposti in relazione tra loro all’interno del box. In questo modo vengono dunque ripartiti tutti gli elementi. CSS Flexbox assicura così che lo spazio di questi elementi sia riempito in modo adeguato.

Flexbox si basa su un container (flex container) che a sua volta contiene diversi elementi (flex items).

Il container assegna le sue proprietà agli elementi ivi contenuti, ciò vuol dire che gli elementi sono i flexbox effettivi.

I due assi hanno ciascuno una direzione: in genere l’asse orizzontale va da sinistra a destra, mentre l’asse verticale va dall’alto verso il basso. Nei flexbox gli elementi possono essere disposti in righe o in colonne. Non è prevista una combinazione. Per esempio, se si sceglie la disposizione in riga (che è anche lo standard), CSS Flexbox cercherà di organizzare tutti gli elementi in una riga.

Vediamo un esempio. Creiamo il contentitore con i 3 elementi con HTML:

<div class="flex-container">  
   <div class="flex-item">Box 1</div>  
   <div class="flex-item">Box 2</div>  
   <div class="flex-item">Box 3</div>
</div>

Utilizzando i CSS distribuiamo i singoli Items lungo l’asse principale orizzontale (flex-direction:row) partendo da sinistra (justify-content:flex-start) verso  destra.

<style>
.grigio { background-color: grey; }
.grafica { 
    background-color: white;
    line-height: 100px;
    width: 200px;
    margin: 10px;
    text-align: center;
    font-size: 50px;
}

.flex-container {
  display: flex;
  flex-direction: row;
}
.flex-item { justify-content:flex-start; }
</style>

Proprietà per il flex container

flex-direction (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
Esistono 4 diverse possibilità che possono essere utilizzate con la proprietà flex-direction:

• row: disposizione degli item da sinistra a destra
• row-reverse: disposizione degli elementi da destra a sinistra
• column: disposizione degli elementi dall’alto al basso
• column-reverse:  disposizione degli elementi dal basso all’alto

justify-content (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
Specifica la distribuzione degli items lungo l'asse fissato dall'istruzione flex-direction. Qualora nel container vi sia almeno un box con flex-grow diverso da zero questa proprietà non comporta alcun effetto. I valori principali che che possono essere assegnati all'istruzione justify-content sono (solo flex-start, flex-end e center sono supportati da tutti i browser):

• flex-start: gli items vengono allineati a seconda del valore di flex-direction. Quindi: a sinistra con flex-direction=row; a destra con flex-direction=row-reverse; in alto con flex-direction=column;  in basso con flex-direction=column-reverse;
• flex-end: A seconda del direzione indicata con flex-direction ho: a destra con flex-direction=row; a sinistra con flex-direction=row-reverse; in basso con flex-direction=column;  in alto con flex-direction=column-reverse;
• center: centrato: verticalmente con flex-direction=column-reverse o flex-direction=column; orizzontalmente con flex-direction=row o flex-direction=row-reverse;
• space-around: imposta los stesso spazio intorno ai lati del box lungo la direzione fissata da flex-direction. Pertanto tra 2 box adiacenti la distanza risulta doppia rispetto a quella tra il box iniziale/finale e il bordo del contenitore.
• space-between: Il primo e l'ultimo box non hanno alcuno spazio sul lato adiacente al bordo del contenitore lungo l'asse fissato da flex-direction.
• space-evenly: lo spazio tra i box e tra il box iniziale/finale con il bordo del contenitore risultano tutti identici.

flex-wrap (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
Con flex-wrap si possono distribuire gli elementi in modo ordinato su più linee.

• nowrap: I box continuano ad essere inseriti lungo la stessa linea (per la distribuzione degli items occorre usare align-items);
• wrap: Se non c'è più spazio nel contenitore i box vengono sistemati nelle linee/colonne successive (per la distribuzione degli items occorre usare align-content);
• wrap-reverse: Se non c'è più spazio nel contenitore i box vengono sistemati nelle linee/colonne precedenti (per la distribuzione degli items occorre usare align-content);

flex-flow (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)
Il comando flex-flow è un'abbreviazione di flex-direction e flex-wrap. Ad esempio flex-flow:row wrap; equivale a: flex-direction:row; flex-wrap:wrap;.

align-content (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
Questa proprietà funziona solo se il wrap è attivo (con flex-wrap:wrap o flex-wrap:wrap-reverse). Specifica la distribuzione all'interno del contenitore degli items mandati a capo per effetto del wrap. I valori ammessi per la seguente proprietà sono:

• flex-start: gli items che vengono mandati su un'altra riga/colonna per effetto del wrap vengono sistemati senza inserire alcun distanziamento tra gli items posti su differenti righe/colonne. La sequenza degli items parte seguendo la stessa direzione fissata dalla proprietà flex-direction.
• flex-end: come nel caso precedente solo che la sequenza degli items parte dalla fine della direzione opposta a quella fissata dalla proprietà flex-direction.
• center: come nel caso precedente solo che la sequenza degli items parte dal punto centrale associato alla direzione opposta a quella  fissata dalla proprietà flex-direction.
• space-between: gli items mandati a capo per effetto del wrap vengono sistemati su righe/colonne poste tra loro medesima distanza. La distanza tra il bordo del contenitore e la prima/ultima fila di items è nulla.
• space-around: gli items mandati a capo per effetto del wrap vengono sistemati su righe/colonne circondate dal medesimo spazio. Pertanto la distanza tra le righe/colonne di items risulta doppia rispetto a quella tra il bordo del contenitore e la prima/ultima fila di items.
• space-evenly: gli items mandati a capo per effetto del wrap vengono sistemati su righe/colonne poste tra loro alla medesima distanza. Anche la distanza tra il bordo del contenitore e la prima/ultima fila di items è la stessa.
• stretch: gli items che vengono mandati su un'altra riga/colonna per effetto del wrap vengono sistemati senza mettere alcun distanziamento tra le righe/colonne e ridimensionati in modo che tutto lo spazio disponibile venga occupato. Se gli items hanno settato la proprietà height  questa proprietà non ha alcun effetto

align-items (https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
Questa proprietà funziona solo se il wrap non è attivo (con flex-wrap:nowrap). Specifica la posizione della sequenza degli items rispetto all'asse opposto a quello definito con la proprietà flex-direction . I valori ammessi per la seguente proprietà sono:

• flex-start: l'insieme degli items che compongono una linea/colonna vengono inseriti all'inizio della direzione prevista dall'asse opposto a quello indicato in flex-direction.
• flex-end: l'insieme degli items che compongono una linea/colonna vengono inseriti alla fine della direzione prevista dall'asse opposto a quello indicato in flex-direction.
• center: l'insieme degli items che compongono una linea/colonna vengono inseriti al centro della direzione prevista dall'asse opposto a quello indicato in flex-direction.
• stretch: gli items vengono espansi lungo l'asse opposto a quello indicato in flex-direction fino a occupare l'intero contenitore.
• baseline: l'insieme degli items che compongono una linea/colonna vengono inseriti sulla linea base del testo lungo la direzione prevista dall'asse ortogonale a quello indicato in flex-direction.

Proprietà per i flex item

order (https://developer.mozilla.org/en-US/docs/Web/CSS/order)
 Il valore predefinito (se non specificato) è 0. Il valore dell’ordine aggiunge l’oggetto ad un gruppo astratto. Tutti gli elementi che abbiamo creato finora appartengono allo stesso gruppo perché hanno tutti il valore 0. Partendo da questo valore è ora possibile spostare singoli oggetti in avanti (-1) o indietro (1).
Quindi, se si lasciano tutti gli elementi tranne uno sul valore zero e si dà all’oggetto selezionato il valore 1, questo verrà visualizzato solo dopo gli altri elementi. Questo procedimento può essere proseguito assegnando anche altri valori (più alti o più bassi). Si tratta di una rappresentazione puramente visiva: la sequenza logica secondo il documento HTML non viene modificata.

flex-grow (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
Questa proprietà definisce la capacità di un item di espandersi se necessario. Se tutti gli elementi sono posti a 1 lo spazio libero verrà distribuito in modo uguale tra tutti gli item che si espanderanno di conseguenza lungo l'asse indicato da flex-direction. Se un item ha la proprietà flex-grow pari a 2 mentre tutti i restanti hanno il valore 1 allora la sua espansione sarà doppia rispetto agli altri (purchè questo sia possibile!). Il valore 0 lascia inalterata la dimensione dell'item lungo l'asse fissato da flex-direction. Non sono ammessi valori negativi.

flex-shrink (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
Questa proprietà definisce se l'item può essere ristretto quando necessario. Se il valore è posto a 0 la dimensione del box lungo l'asse indicato da flex-direction non potrà essere ridotta e si manterrà ampia come definito nella proprietà flex-basis. Gli item che presentano un valore in flex-shrink maggiore rispetto agli altri verranno ridotti maggiormente rispetto a quegli elementi che presentano un valore inferiore.

flex-basis (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
Questa  proprietà definisce la dimensione predefinita dell'elemento quando esiste ancora spazio libero nel contenitore lungo l'asse definito con flex-direction. Può essere una lunghezza (20%, 120px, etc.) o una parla chiave. Se impostato al valore auto verrà utilizata la proprietà height (o width a seconda dell'asse utilizzato). Se invece viene impostata a content l'item verrà ridimensionato in base al suo contenuto. Questa parola chiave non è ancora ben supportata.

flex (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
La proprietà flex è un'abbreviazione della combinazione flex-grow,  flex-shrink. e flex-basis. E' preferibile utilizzare questa scorciatoia piuttosto che settare le singole proprietà. La proprietà flow imposta le singole proprietà in modo più intelligente. Il suo default è 1 0 auto ma è possibile settarlo solo con un singolo valore (esempio 1, 0, etc.)

align-self (https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
La proprietà align-self èpermette di posizionare il singolo item indipendentemente dalle impostazioni definite nel container. I valori ammessi per la seguente proprietà sono:

• flex-start: l'elemento viene posto all'inizio della direzione prevista dall'asse opposto a quello indicato in flex-direction.
• flex-end: l'elemento viene posto alla fine della direzione prevista dall'asse opposto a quello indicato in flex-direction.
• center: l'elemento viene posto al centro della direzione prevista dall'asse opposto a quello indicato in flex-direction.
• stretch: l'elemento viene espanso lungo l'asse opposto a quello indicato in flex-direction fino ad occupare l'intera dimensione del contenitore.
• baseline: l'elemento viene posto sulla linea base del testo lungo la direzione prevista dall'asse ortogonale a quello indicato in flex-direction.

Esempio dinamico sui FlexBox