Con il flexbox, forse per la prima volta nella storia dei CSS, abbiamo a disposizione uno strumento esplicitamente pensato per la strutturazione del layout.

Una carrellata di esempi per comprendere in pratica il significato delle regole flexbox. Utili a realizzare layout o componenti.

Creare il classico layout mobile con interamente con il flexbox, con header e un footer ad altezza fissa e una parte centrale flessibile

Realizzare layout di form o di singoli componenti che possano adattarsi ed essere riutilizzati in scenari differenti.

Flexbox è ideale per layout basati su elementi ripetuti disposti su più righe come gallerie di immagini, schede di prodotti e soprattutto per il mobile.

Con flexbox affiancare colonne della stessa altezza diventa più immediato, non più una soluzione basata su hack ma fondata sulle funzionalità native dei CSS

Flexbox si rivela perfettamente adeguato in strategie di adattamento dei contenuti e del layout al mobile, vediamo un esempio con menu e item flessibili.

Flexbox si rivela ideale per la centratura di elementi all’interno di un box, soprattutto per la centratura verticale, più complessa da ottenere altrimenti.