Come creare layout intelligenti solo CSS con Flexbox

Flexible box, o Flexbox in breve, è un insieme di proprietà in CSS introdotte nel 2009 per fornire un nuovo, eccezionale sistema di layout. Il modulo Flexbox è identificato come parte della terza versione dei CSS (CSS3).

Probabilmente stai già utilizzando molte delle nuove proprietà in CSS3, come box-shadow , border-radius , background gradients e così via. Tuttavia, Flexbox deve ancora vedere l'adozione diffusa che merita. Ciò può essere dovuto a tutte le modifiche sostanziali che ha subito nel corso degli anni, o perché è supportato solo in parte in Internet Explorer 10, o semplicemente perché Flexbox è un intero ecosistema mentre i paradigmi precedenti si basavano principalmente su un singolo, pronto per vai proprietà.

È super potente e offre un'ampia gamma di opzioni per ottenere layout che, in precedenza, potevano solo essere sognati.

Questo articolo ti guiderà attraverso le basi di Flexbox e come puoi usarlo per ottenere dei layout davvero interessanti che altrimenti richiederebbero complicati hack CSS o persino JavaScript.

Perché usare Flexbox?

Per impostazione predefinita, gli elementi HTML a livello di blocco si accumulano, quindi se vuoi allinearli in una riga, devi fare affidamento su proprietà CSS come float o manipolare la proprietà display con impostazioni table-ish o inline-block.

Se scegli di usare float (sinistra o destra), devi cancellare il wrapper a un certo punto per spingerlo fino all'ultimo elemento float, altrimenti traboccheranno su tutto ciò che verrà dopo. Tuttavia, con float, sei limitato a organizzare gli elementi orizzontalmente.

In alternativa, o in aggiunta, puoi manipolare la proprietà di display per cercare di ottenere il layout che desideri! Ma questo spesso sembra goffo, per non dire noioso, e spesso si traduce in un layout abbastanza fragile che non sarà necessariamente visualizzato in modo coerente tra i browser. Questo approccio è particolarmente inefficace se si prendono di mira più dispositivi di dimensioni diverse, cosa che accade quasi sempre al giorno d'oggi.

Entra in Flexbox!

Con una semplice regola applicata a un elemento padre, puoi facilmente controllare il comportamento del layout di tutti i suoi figli.

Con Flexbox puoi:

• Invertire l'ordine degli elementi all'interno di un genitore Flexbox.
• Avvolgi gli elementi figlio in colonne (il numero di colonne può variare a seconda dell'altezza del figlio e del genitore).
• Specifica la velocità con cui gli elementi crescono o si restringono mentre le dimensioni della finestra cambiano.
• Controlla se gli elementi sono riducibili o meno, indipendentemente dal tipo di unità di larghezza specificato (relativa o assoluta).
• Modifica l'ordine degli elementi con CSS (combinalo con le query multimediali e troverai possibilità illimitate nel tuo flusso).
• Genera distribuzioni complesse degli elementi in modo che siano equidistanti con lo spazio intorno o solo con lo spazio intermedio.
• Genera elementi "rinnegati" che scorrono in modo diverso (tutti a sinistra tranne uno a destra, in alto/in basso... tocca a te).
• E, soprattutto, evita per sempre l'hack di correzione chiara!

Capisco che Flexbox possa essere difficile all'inizio. Penso che sia più facile imparare dieci proprietà CSS non correlate rispetto a cinque con una certa interdipendenza. Tuttavia, con le tue attuali abilità CSS e forse un piccolo aiuto da questo articolo, ti lancerai in un nuovo universo CSS.

Le basi di Flexbox

Schermo

display è una delle proprietà più basilari dei CSS ed è piuttosto importante nel contesto di Flexbox, poiché viene utilizzato per definire un flex wrapper.

Esistono due possibili valori di wrapper flessibile: flex e inline-flex .

La differenza tra i due è che un display: flex wrapper agisce come un elemento di blocco mentre un display: inline-flex wrapper agisce come un inline-block. Inoltre, gli elementi inline-flex crescono se non c'è abbastanza spazio per contenere i bambini. Ma a parte queste differenze, il comportamento dei due sarebbe lo stesso.

Prova il codice di esempio riportato di seguito, riduci la larghezza del viewport quando inline-flex è attivo e... scorri.

Vedere la proprietà Pen Flexbox @Toptal - Parent - `display` di DD (@Diegue) su CodePen.

 .wrapper { display: flex || inline-flex; }

Direzione Flessibile

Ora che hai visto il primo esempio, puoi dedurre che il comportamento predefinito consiste semplicemente nel creare una riga degli elementi. Ma c'è di più:

• riga (predefinito): dispone gli elementi da sinistra a destra (ma se è impostato RTL sarebbe indietro).
• row-reverse: inverte l'ordine degli elementi in una disposizione di riga
• colonna: dispone gli elementi dall'alto verso il basso
• column-reverse: inverte gli ordini degli elementi in una disposizione di colonna

Suggerimento: i valori di column e column-reverse possono essere utilizzati per scambiare gli assi, quindi le proprietà che influirebbero sull'asse orizzontale influirebbero invece sull'asse verticale.

Vedere la proprietà Pen Flexbox @Toptal - Parent - `flex-direction` di DD (@Diegue) su CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Involucro flessibile

Se controlli il primo esempio di codice, scoprirai che gli elementi figlio non si impilano per impostazione predefinita all'interno di un wrapper flessibile. È qui che entra in gioco flex-wrap :

• nowrap (predefinito): impedisce il wrapping degli elementi in un contenitore flessibile
• avvolgere: avvolge gli elementi secondo necessità in più righe (o colonne, a seconda flex-direction )
• wrap-reverse: proprio come wrap , ma il numero di righe (o colonne) cresce nella direzione opposta quando gli elementi vengono avvolti

Vedere la proprietà Pen Flexbox @Toptal - Parent - `flex-wrap` di DD (@Diegue) su CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Flusso flessibile

È possibile combinare le proprietà flex-direction e flex-wrap in un'unica proprietà: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Giustifica il contenuto

Questa proprietà viene utilizzata per controllare l'allineamento orizzontale degli elementi figlio:

• flex-start (predefinito): gli elementi sono allineati a sinistra (simile agli elementi inline con text-align: left )
• flex-end: gli elementi sono allineati a destra (simile agli elementi inline con text-align: right )
• center: gli elementi sono centrati (simile agli elementi inline con text-align: center )
• space-around (dove inizia la magia): ogni elemento verrà visualizzato con la stessa quantità di spazio attorno a ciascun elemento. Si noti che lo spazio tra due elementi figlio sequenziali sarà il doppio dello spazio tra gli elementi più esterni e i lati del wrapper.
• space-between: proprio come space-around , tranne per il fatto che gli elementi saranno separati dalla stessa distanza e non ci sarà spazio vicino a nessuno dei bordi del wrapper.

Nota: ricorda flex-direction , quando è impostato su column o column-reverse , scambia l'asse. Se uno di questi è impostato, justify-content influenzerà l'allineamento verticale, non orizzontale.

Vedere la proprietà Pen Flexbox @Toptal - Parent - `justify-content` di DD (@Diegue) su CodePen.

Allinea gli elementi

Questa proprietà è simile a justify-content ma il contesto dei suoi effetti sono le righe invece del wrapper stesso:

• flex-start: gli elementi sono allineati verticalmente alla parte superiore dell'involucro.
• flex-end: gli elementi sono allineati verticalmente alla parte inferiore dell'involucro.
• centro: gli elementi sono centrati verticalmente all'interno dell'involucro (finalmente, una pratica sicura per raggiungere questo obiettivo).
• stretch (predefinito): forza gli elementi a occupare l'intera altezza (se applicato a una riga) e l'intera larghezza (se applicato a una colonna) del wrapper.
• linea di base: allinea verticalmente gli elementi alle linee di base effettive.

Vedere la proprietà Pen Flexbox @Toptal - Parent - `align-items` di DD (@Diegue) su CodePen.

Allinea il contenuto

Questa proprietà è simile a justify-content e align-items ma funziona sull'asse verticale e il contesto è l'intero wrapper (non la riga come nell'esempio precedente). Per vedere i suoi effetti, avrai bisogno di più di una riga:

• flex-start: le righe sono allineate verticalmente verso l'alto (cioè, impilate dalla parte superiore del wrapper).
• flex-end: le righe sono allineate verticalmente al fondo (cioè, impilate dal fondo del wrapper).
• centro: le righe sono centrate nel wrapper verticalmente.
• stretch (predefinito): in generale, questa proprietà allunga gli elementi per utilizzare l'intera altezza verticale del wrapper. Tuttavia, se hai impostato un'altezza specifica degli elementi, tale altezza sarà rispettata e lo spazio verticale rimanente (in quella riga, sotto quell'elemento) sarà vuoto.
• space-around: ogni riga verrà renderizzata con la stessa quantità di spazio attorno a se stessa verticalmente (cioè, sotto e sopra se stessa). Si noti che lo spazio tra due righe sarà, quindi, il doppio dello spazio tra la riga superiore e inferiore e i bordi del wrapper.
• space-between: proprio come space-around , tranne per il fatto che gli elementi saranno separati dalla stessa distanza e non ci sarà spazio sui bordi superiore e inferiore del wrapper.

Vedere la proprietà Pen Flexbox @Toptal - Parent - `align-content` di DD (@Diegue) su CodePen.

Crescita flessibile

Questa proprietà imposta la proporzione relativa dello spazio disponibile che l'elemento dovrebbe utilizzare. Il valore deve essere un numero intero, dove 0 è il valore predefinito.

Diciamo che hai due elementi diversi nello stesso involucro flessibile. Se entrambi hanno un valore di flex-grow di 1, aumenteranno allo stesso modo per condividere lo spazio disponibile. Ma se uno ha un valore di flex-grow di 1 e l'altro un valore di flex-grow di 2, come mostrato nell'esempio seguente, questo con un valore di flex-grow di 2 crescerà per occupare il doppio dello spazio del primo.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

Vedi la proprietà Pen Flexbox @Toptal - Children - `flex-grow` di DD (@Diegue) su CodePen.

Termoretraibile flessibile

Simile a flex-grow , questa proprietà imposta se l'elemento è "riducibile" o meno con un valore intero. Simile a flex-grow , flex-shrink specifica il fattore di restringimento di un articolo flessibile.

Vedi la proprietà Pen Flexbox @Toptal - Children - `flex-shrink` di DD (@Diegue) su CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Base flessibile

Questa proprietà viene utilizzata per definire la dimensione iniziale di un elemento prima che lo spazio disponibile venga distribuito e gli elementi vengano adeguati di conseguenza.

Suggerimento: flex-basis non supporta calc() e box-sizing: border-box in tutti i browser, quindi ti consiglio di usare width se hai bisogno di usare uno di questi (nota che dovrai anche impostare flex-basis: auto; ).

Vedi la proprietà Pen Flexbox @Toptal - Children - `flex-basis` di DD (@Diegue) su CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Flettere

È possibile combinare le proprietà flex-grow , flex-shrink e flex-basis in un'unica proprietà: flex come segue:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Suggerimento: se prevedi di utilizzare flex , assicurati di definire ogni singolo valore (anche se desideri utilizzare i valori predefiniti) perché alcuni browser potrebbero non riconoscerli (un bug comune è relativo alla mancata definizione del valore flex-grow ).

Allinea il Sé

Questa proprietà è simile a align-items ma l'effetto viene applicato individualmente a ciascun elemento. I valori possibili sono:

• flex-start: allinea verticalmente l'elemento alla parte superiore del wrapper.
• flex-end: allinea verticalmente l'elemento alla parte inferiore del wrapper.
• centro: centra verticalmente l'elemento all'interno dell'involucro (finalmente un modo semplice per ottenere ciò!).
• stretch (predefinito): allunga l'elemento per occupare l'intera altezza del wrapper (se applicato a una riga) o l'intera larghezza del wrapper (se applicato a una colonna).
• baseline: allinea gli elementi in base alle loro effettive linee di base.

Vedi la proprietà Pen Flexbox @Toptal - Children - `align-self` di DD (@Diegue) su CodePen.

Ordine

Una delle cose migliori incluse in Flexbox è la possibilità di riordinare gli elementi (usando la proprietà order ) senza dover modificare il DOM o usare JavaScript. Il modo in cui funziona la proprietà order è semplicissimo. Più o meno allo stesso modo in cui z-index controlla l'ordine in cui vengono visualizzati gli elementi, order controlla l'ordine in cui gli elementi sono posizionati all'interno del wrapper; cioè gli elementi con un valore d' order inferiore (che può essere anche negativo, tra l'altro) sono posizionati prima di quelli con un valore d' order superiore.

Vedi la proprietà Pen Flexbox @Toptal - Children - `order` di DD (@Diegue) su CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Mettere tutto insieme: esempi di utilizzo di Flexbox

Quando si tratta di progettare layout, Flexbox libera un mondo di possibilità. Di seguito, puoi trovare alcuni esempi di utilizzo delle proprietà di Flexbox.

Componente di allineamento verticale

Con Flexbox, puoi allineare qualsiasi cosa in verticale, inclusi più elementi contemporaneamente. Senza Flexbox, avevi bisogno di utilizzare tecniche di posizionamento o table-ish che ci richiedevano di creare un figlio per contenere più elementi. Ma con Flexbox, puoi lasciarti alle spalle queste tecniche noiose e fragili e definire semplicemente alcune proprietà nel wrapper e il gioco è fatto, indipendentemente da quante volte il contenuto all'interno del contenitore cambia o dal tipo di modifica!

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

Guarda la Pen Flexbox @Toptal - Usi reali che possiamo dare - Allineamento verticale di DD (@Diegue) su CodePen.

Disposizione metà/metà

Un layout "metà/metà" è un layout a tutta altezza con due colonne, ciascuna con il contenuto centrato verticalmente. Di solito è implementato "above the fold" (cioè prima che gli utenti abbiano effettuato lo scorrimento verso il basso dopo il caricamento della pagina).

Usando tecniche più tradizionali, potresti creare questo layout con elementi float (di larghezza 50% ciascuno), ripulendo i float nel wrapper ("clearfix" :before and :after , overflow: hidden , o uno stravagante <div> con clear: both; alla fine). Eppure è molto lavoro e il risultato non è stabile come quello fornito da Flexbox.

Nel seguente frammento di codice, vedrai quanto è facile impostare il layout e anche come i bambini diventano anche wrapper Flexbox poiché anche tutto è allineato verticalmente.

Involucro esterno:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Involucri interni:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

Vedi Pen Flexbox @Toptal - Real use we can give - Half-bleed section di DD (@Diegue) su CodePen.

Pulsanti della barra di navigazione a tutta larghezza

Una barra di navigazione a larghezza intera distribuisce lo spazio equamente nella stessa riga di elementi della barra di navigazione indipendentemente dal numero di elementi.

Nell'esempio seguente, ci sono anche alcuni pulsanti iconici senza questo comportamento, a dimostrazione del fatto che puoi combinare i due in qualsiasi modo desideri. Senza Flexbox, il raggiungimento di questo tipo di layout avrebbe richiesto codice JavaScript per calcolare lo spazio disponibile e quindi distribuirlo a livello di codice a seconda di quali pulsanti si estendono e quali no.

Flexbox lo rende molto più semplice.

Proprietà dell'involucro:

 .navbar { display: flex; }

Spanning proprietà figlio:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Proprietà figlio non estese:

 .navbar-other { flex-grow: 0; // They won't grow } 

Guarda la Flexbox della penna @Toptal - Usi reali che possiamo dare - Barra di navigazione dei pulsanti al vivo di DD (@Diegue) su CodePen.

Sfoca

Quante volte hai dovuto implementare una serie di caselle informative con icone e testo in diversi progetti?

Questa distribuzione di elementi è per lo più utile nel marketing digitale, ma può avere altri usi nello sviluppo di software. Con la potenza di Flexbox, puoi impostare una sorta di griglia e anche allineare gli elementi indipendentemente da quanti ce ne siano.

Proprietà dell'involucro:

 .wrapper { display: flex; flex-wrap: wrap; }

Proprietà figlio:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Per i viewport di tablet e dispositivi mobili, la larghezza varia tra il 50% e il 100%.

Guarda Pen Flexbox @Toptal - Real use we can give - Blurbs di DD (@Diegue) su CodePen.

Miglioramento della compatibilità tra browser

La sintassi di Flexbox è cambiata numerose volte nelle diverse versioni del browser. Questo può essere un problema quando si implementa un layout con Flexbox e si cerca di supportare i browser Web meno recenti, in particolare le versioni precedenti di Internet Explorer.

Fortunatamente, molte tecniche e soluzioni alternative per far funzionare il codice sulla più ampia gamma di browser Web sono elencate in Flexbugs, che è un'ottima risorsa. Se segui le informazioni su quel sito, otterrai risultati migliori e coerenti su diversi browser web.

Le attività di prefisso sono particolarmente utili a questo proposito. Per automatizzare il prefisso delle regole CSS, puoi scegliere uno dei seguenti strumenti:

Rubino:

• Binari con prefisso automatico
• Prefissore automatico Middleman

Node.js:

• Prefisso automatico PostCSS
• Prefissore automatico Grunt
• Prefisso automatico Gulp

Inizia a creare layout intelligenti

Flexbox è un ottimo strumento per velocizzare, perfezionare e ridimensionare il nostro lavoro. Il limite è solo nell'immaginazione dello sviluppatore.

Se hai bisogno di un aiuto visivo per pianificare il tuo prossimo layout, puoi provare questo bel parco giochi:

Guarda il Pen Flexbox @Toptal - Parco giochi Flexbox di DD (@Diegue) su CodePen.

Aprilo in una nuova finestra.

Con la crescente adozione dei browser Web moderni da parte della maggior parte degli utenti, l'utilizzo di Flexbox ti consentirà di creare facilmente layout sorprendenti senza la necessità di approfondire il codice JavaScript disordinato o creare CSS ingombranti.