Flexbox - Panoramica

Cascesa Style Sheets (CSS) è un semplice linguaggio di progettazione inteso a semplificare il processo di presentazione delle pagine web. CSS gestisce l'aspetto grafico di una pagina web.

Utilizzando CSS, è possibile controllare il colore del testo, lo stile dei caratteri, la spaziatura tra i paragrafi, il modo in cui le colonne sono dimensionate e disposte, quali immagini di sfondo o colori vengono utilizzati, design del layout, variazioni di visualizzazione per diversi dispositivi e dimensioni dello schermo così come una varietà di altri effetti.

Per determinare la posizione e le dimensioni delle caselle, in CSS, puoi utilizzare una delle modalità di layout disponibili:

The block layout - Questa modalità viene utilizzata per disporre i documenti.
The inline layout - Questa modalità viene utilizzata per disporre il testo.
The table layout - Questa modalità viene utilizzata per disporre le tabelle.
The table layout - Questa modalità viene utilizzata per posizionare gli elementi.

Tutte queste modalità vengono utilizzate per allineare elementi specifici come documenti, testo, tabelle, ecc., Tuttavia, nessuna di queste fornisce una soluzione completa per la disposizione di siti Web complessi. Inizialmente questo viene utilizzato per essere fatto utilizzando una combinazione di elementi flottati, elementi posizionati e layout di tabella (spesso). Ma i galleggianti consentono solo di posizionare orizzontalmente le scatole.

Cos'è Flexbox?

Oltre alle modalità sopra menzionate, CSS3 fornisce un'altra modalità di layout Flexible Box, comunemente chiamata come Flexbox.

Utilizzando questa modalità, è possibile creare facilmente layout per applicazioni complesse e pagine Web. A differenza dei flottanti, il layout Flexbox offre il controllo completo sulla direzione, l'allineamento, l'ordine e la dimensione delle scatole.

Caratteristiche di Flexbox

Di seguito sono riportate le caratteristiche principali del layout Flexbox:

Direction - È possibile disporre gli elementi su una pagina Web in qualsiasi direzione, ad esempio da sinistra a destra, da destra a sinistra, dall'alto in basso e dal basso verso l'alto.
Order - Utilizzando Flexbox, puoi riorganizzare l'ordine dei contenuti di una pagina web.
Wrap - In caso di spazio incoerente per i contenuti di una pagina web (in una sola riga), è possibile avvolgerli su più righe (sia orizzontalmente) che verticalmente.
Alignment - Utilizzando Flexbox, puoi allineare i contenuti della pagina web rispetto al loro contenitore.
Resize - Utilizzando Flexbox, puoi aumentare o diminuire le dimensioni degli elementi nella pagina per adattarli allo spazio disponibile.

Browser supportati

Di seguito sono riportati i browser che supportano Flexbox.

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1 e versioni successive
Android 4.4+
iOS 7.1+