Bootstrap 4.0 – Flexbox layout e l’allineamento dei contenuti

 9 gennaio 2018


Bootstrap si aggiorna alla versione 4.0 e introduce importanti novità tra cui il supporto al Flexbox Layout per facilitare la gestione di strutture complesse e l’allineamento di specifici componenti.

Bootstrap 4.0 introduce il supporto al Flexbox Layout, con l’obiettivo di rendere la vita più semplice al web developer che intende disegnare layout responsive complessi formati da elementi all’interno di un elemento contenitore, e che non vuole preoccuparsi di gestirne il posizionamento, la dimensione, l’ordinamento e l’allineamento verticale e orizzontale etc.

Ma come funziona Flexbox?

Ci sono pochi concetti di base da tenere bene a mente:

Flex Container: è l’elemento contenitore “padre” che contiene gli item flessibili, e si crea utilizzando la proprietà display:flex;
Flex Items: gli elementi “figli” flessibili ai quali sono applicate le proprietà definite nel Flex Container. I Flex Items hanno anche delle proprietà specifiche, a supporto e completezza di quelle definite nel Flex Container.

Se avete letto altri miei articoli sapete che ho un approccio molto pragmatico all’apprendimento, pertanto mostrerei subito degli esempi che vi aiutino a comprendere il funzionamento di Flexbox e allo stesso tempo vi permettano di familiarizzare con la sintassi e le proprietà.


Flex-direction

La proprietà definisce la direzione in cui impostare i contenuti all’interno del contenitore.
Valori: row | row-reverse | column | column-reverse


Flex-wrap

La proprietà definisce la disposizione degli elementi, su una o più righe a seconda dello spazio disponibile all’interno del Flex Container.
Valori: nowrap | wrap | wrap-reverse

Notate come, in entrambi i casi, la proprietà width:100px applicata al .flex-container>div venga del tutto ignorata: in caso di flex-wrap:wrap i div risultano più larghi (104px), mentre in caso di flex-wrap:nowrap la loro larghezza di riduce notevolmente affinchè stiano tutti su una riga.


Flex-flow

La proprietà imposta sia la flex-direction che la flex-wrap appena descritte tramite una sintassi unica abbreviata.
Valori: row | row-reverse | column | column-reverse e poi nowrap | wrap | wrap-reverse


Justify-content

La proprietà gestisce l’allineamento dei contenuti rispetto all’asse orizzontale del contenitore.
Valori: flex-start | flex-end | center | space-between | space-around

Align-items

La proprietà gestisce l’allineamento dei contenuti rispetto all’asse verticale del contenitore.
Valori: stretch | flex-start| flex-end | center | baseline


Align-content

La proprietà viene usata in presenza di più righe di elementi (flex-items), e ne gestisce l’allineamento rispetto all’asse orizzontale del contenitore padre.
Valori: stretch | flex-start| flex-end | center | space-between | space-around


Nostalgico delle glyphicons presenti nella versione Bootstrap 3? In questo articolo spiegherò come renderle disponibili anche nella versione 4.0.


Lascia un commento