Cos'è Flexbox (e perché dovresti usarlo)

È possibile creare sezioni pulite tutto il giorno, ma l'allineare elementi su ogni dimensione dello schermo può iniziare a sembrare più di prova ed errore rispetto al design intenzionale.

Flexbox lo risolve. Ti dà un controllo reale su come gli elementi siedono, si allungano, si restringono e avvolgono all'interno di un contenitore, senza una costante regolazione dei margini e dell'imbottitura. In questa guida, scomporremo come funziona Flexbox, come semplifica i layout e come usarlo visivamente all'interno della Divi 5 senza scrivere una singola riga di codice.

Cos'è Flexbox

Flexbox, abbreviato per il layout della scatola flessibile , è un modello di layout che semplifica il modo in cui gli elementi si allineano e si spazio all'interno di un contenitore. Invece di posizionare manualmente ogni elemento utilizzando margini o larghezze fisse, Flexbox consente di definire come tali elementi dovrebbero comportarsi a seconda dello spazio disponibile.

Gli elementi dovrebbero crescere per riempire spazio extra? Riduci quando lo spazio è stretto? Dovrebbero avvolgere la riga successiva quando non si adattano più? Fai queste scelte attraverso una serie di proprietà che applichi al contenitore e ai suoi figli. Ecco come decidi come dovrebbe rispondere il tuo layout.

Prendiamo esempi pratici per capirlo. Supponi di avere tre pulsanti all'interno di una riga orizzontale. Con Flexbox, puoi centrali uniformemente all'interno del contenitore:

Decidi che il pulsante centrale dovrebbe occupare più spazio degli altri:

Oppure potresti volere che i pulsanti si immergano automaticamente quando lo schermo diventa più stretto:

Flexbox rende tutto ciò possibile con proprietà semplici come giustificare il contenuto di contenuto, flessibile e flessione.

Inoltre, ti consente di controllare come gli articoli sono distanziati, allineati su asce diversi e ordinati visivamente, senza cambiare la loro posizione effettiva nel costruttore. È possibile centrare il contenuto, spingerlo verso la parte superiore o inferiore del contenitore, allineare un elemento in modo diverso dal resto o persino invertire l'intero ordine attraverso i punti di interruzione.

Potresti pensare: non posso già farlo con margini e imbottitura?

Hai ragione. È possibile centrare gli elementi manualmente o regolare le loro dimensioni con larghezze personalizzate. Tuttavia, questi metodi si basano sul posizionamento di ciascun elemento singolarmente. Stai regolando ogni elemento uno alla volta, per ogni dimensione dello schermo.

Flexbox sposta tutto questo elaborazione. Invece di trattare ogni elemento separatamente, ti consente di definire una volta le regole di layout a livello del contenitore. Dici al contenitore come i suoi figli dovrebbero comportarsi in diversi scenari e li regola secondo necessità.

Questo approccio rende i layout più coerenti, più facili da gestire e più flessibili man mano che i progetti si evolvono, specialmente quando vengono aggiunte le dimensioni dello schermo o i nuovi moduli.

In che modo la direzione flessibile influisce sull'allineamento

Una delle prime scelte che fai in Flexbox è la direzione in cui gli elementi dovrebbero fluire, in una riga o una colonna. La proprietà della direzione flessibile imposta questo e definisce come gli articoli si allineano, si avvolgono e si spaziano all'interno del contenitore.

Comprendiamolo meglio perché le proprietà comuni come giustificare il contenuto e il contenuto di allineamento dipendono interamente da quale direzione è impostata. Non funzionano dal layout predefinito del browser, ma gli assi creati da Flexbox: l' asse principale e l' asse incrociato . L'asse principale segue la direzione impostata con direzione flessibile: orizzontale per righe, verticale per le colonne. L'asse incrociato va dall'altra parte: verticale per righe, orizzontale per le colonne.

Quindi, l'asse principale funziona da sinistra a destra quando la direzione è impostata su riga. Ciò significa che le mosse di contesto giustificano gli elementi attraverso la riga e allinea gli elementi controlla il modo in cui si allineano verticalmente all'interno di quella riga.

E quando si cambia la direzione in colonna, l'intera logica di allineamento si lancia. L'asse principale ora è in cima a fondo, il che significa che giustifica i contenuti allinea in verticale e allineare gli elementi regolano la loro posizione da sinistra a destra.

All'inizio può sembrare leggermente confuso, ma una volta che vedi come gli assi principali e incrociati rispondono alla direzione, fa clic. Inizierai a individuare i modelli e le decisioni di layout ti sentiranno più intuitive. Di seguito c'è anche una rapida tabella di riferimento se vuoi ricontrollare le cose durante la pratica.

Sintassi e proprietà flexbox comuni

Passa la proprietà del display di un contenitore da un blocco a flessione per attivare Flexbox. Quando lo fai, il browser inizia a trattare elementi interni come righe, pulsanti, schede o icone come elementi flessibili.

.container {
display: flex;
}

Da lì, usi diverse proprietà Flexbox per controllare il comportamento. Ad esempio, il contenuto di giustifica decide come gli articoli sono distanziati lungo l'asse principale (questo è impostato su orizzontale per impostazione predefinita, direzione flessibile: riga) . Usa Flex-Start per allineare gli oggetti a sinistra, Flex-End per spingerli a destra, centrali per centrali, o spazio-spazio e spazio per diffonderli uniformemente.

Per impostazione predefinita, Flexbox cerca di adattare tutti gli elementi su una riga. Se ce ne sono troppi, si restringeranno per adattarsi in base alle loro impostazioni Flex-Shrink e se non riescono a ridursi abbastanza, possono traboccare il contenitore. Per evitare questo, accendi Flex-Wrap in modo che gli oggetti passino su una nuova linea invece di stiparsi in una.

Puoi già pensare a molti casi d'uso in cui queste due proprietà possono risolvere i problemi di layout. Ma ce ne sono molti altri e ognuno ti dà controllo specifico su dimensioni, ordine, allineamento e spaziatura.

Se sei curioso di vedere come funzionano effettivamente in modo giocoso e pratico, prova Flexbox Froggy. È un piccolo gioco divertente in cui applichi il codice Flexbox reale per spostare le rane attorno a uno stagno. Lungo la strada, smetti di indovinare e inizi a riconoscere esattamente cosa fa ogni proprietà.

Perché utilizzare Flexbox

Ormai, hai visto come Flexbox cambia come i layout rispondono allo spazio. Ma il vero valore deriva da ciò che questo spostamento ti consente di fare più facilmente. Flexbox trasforma le sfide del layout testardo in modelli semplici e riutilizzabili.

• Allineamento semplificato: proprietà come il centro e gli articoli di allineamento e allineamento senza fare affidamento su modifiche di margine o lezioni di supporto.
• Responsive per impostazione predefinita: gli oggetti crescono naturalmente, si restringono o avvolgono a seconda del loro spazio. Ciò si traduce in layout più puliti che si adattano senza ulteriori punti di interruzione.
• Spaziatura e dimensionamento automatico: controlli come gli elementi condividono lo spazio con proprietà come flex-grow, flex-shrink e flex-basis, rendendo il fluido di layout anziché fisso.
• Riordinamento senza cambiare HTML: è possibile modificare l'ordine visivo degli elementi senza toccare l'HTML. La struttura rimane pulita, mentre il layout si regola per schermi diversi.
• Meno hack di layout: non hai più bisogno di galleggianti, ClearFix o script di abbinamento in altezza. Flexbox sostituisce quelli con opzioni moderne e affidabili.

E poiché è supportato da tutti i principali browser, Flexbox non è solo efficiente ma anche affidabile. Questo lo rende una scelta moderna e affidabile per i progetti del mondo reale.

Perché Flexbox è spesso migliore della griglia

La griglia è un altro sistema di layout popolare, come Flexbox. Tuttavia, entrambi sono costruiti per diversi casi d'uso.

La griglia, ad esempio, è progettata per layout bidimensionali in cui è necessario il controllo sia su righe che su colonne. Le vetrine dei prodotti, le gallerie di immagini e i layout editoriali in stile rivista sono esempi di griglia, poiché si basano su una struttura strettamente allineata su entrambi gli assi.

Inizi definendo la griglia: quante righe e colonne ci sono e quanto dovrebbero essere larghe o alte ciascuna. Quindi metti ogni elemento in quella struttura.

Questo è un layout della griglia. Gli elementi sono allineati su entrambi gli assi: righe e colonne, con spaziatura fissa e proporzioni.

Ma non tutti i layout hanno bisogno di quel livello di pianificazione.

Il più delle volte, le sezioni dell'interfaccia utente fluiscono in un'unica direzione. Righe di carte, blocchi di icona-plus-text e collegamenti di navigazione seguono un asse, non due. È esattamente dove si adatta a Flexbox.

In un layout Flexbox, le carte sono allineate in una direzione (riga o colonna) e quindi avvolte e distanziate in base alle regole del contenitore.

Non devi mappare in anticipo l'intero layout. Si dice semplicemente al contenitore come gli articoli dovrebbero comportarsi lungo un singolo asse e Flexbox lo gestisce.

Quindi, a meno che tu non stia progettando qualcosa che dipende davvero da una griglia rigida, Flexbox sarà spesso la scelta più veloce, più semplice e più flessibile.

Flexbox in Divi 5

Tutto ciò che abbiamo imparato finora su Flexbox è fantastico, ma scrivere CSS personalizzati per ogni modifica del layout non è quello che vuoi fare, soprattutto se hai costruito il tuo sito usando un costruttore visivo come Divi.

Ecco perché Divi 5 ora include i controlli Flexbox integrati. Non è più necessario cambiare schede o aggiungere CSS manualmente. Tutto questo, e persino comportamenti di layout avanzati, è ora incorporato nel Visual Builder, meno la codifica e un travolgente backend.

Iscriviti al nostro canale YouTube

Per farla breve, non è necessario ricordare la sintassi o i nomi delle proprietà, basta selezionare ciò che desideri dall'interfaccia. Fai clic su qualsiasi sezione, riga o colonna, vai alla scheda Design e in Stile layout> Assicurati di utilizzare Flex.

Questo apre una nuova serie di controlli di layout. Queste sono le proprietà Core Flexbox che di solito scriverai in CSS, ma ora come opzioni cliccabili. Puoi testare le modifiche dal vivo e vedere come reagiscono i tuoi contenuti.

Quindi, anche se non hai mai scritto una singola riga di codice Flexbox, non perderai nulla. Divi 5 ti dà visivamente lo stesso controllo del layout con lo stesso livello di controllo, ma molta più facilità.

Scopri tutto sul sistema Flexbox di Divi 5

Nuove strutture di riga

Perché Divi quando anche altri costruttori di web ce l'hanno? Mentre molti costruttori di web offrono Flexbox come opzione di layout, Divi 5 si avvicina in modo diverso. Questa non è una funzionalità stratificata sopra un sistema esistente; Ora è il nucleo di come funziona il costruttore.

L'intero motore di layout è stato ricostruito da zero con Flexbox alle sue fondamenta. Di conseguenza, il comportamento del layout sembra più coerente e prevedibile perché segue una logica di layout progettata intenzionalmente.

Ad esempio, quando aggiungi una nuova sezione o riga in Divi 5, noterai immediatamente qualcosa di diverso. Nuove strutture. Ognuno ora funziona su Flexbox per impostazione predefinita, il che significa che l'allineamento, la spaziatura e la reattività sono gestiti in modo più intelligente dall'inizio.

Non dovrai attivare Flex per nuovi elementi di design che aggiungi. E quando lo fai, durante la modifica di un layout più vecchio, gli strumenti di allineamento e spaziatura diventano immediatamente più facili da gestire.

Puoi anche cambiare il modo in cui le colonne sono disposte all'interno di una riga usando la struttura della colonna di cambiamento.

Questo apre un pannello in cui è possibile selezionare una nuova struttura di colonna. Il layout si aggiorna immediatamente, con Flexbox che regola automaticamente la spaziatura e l'allineamento.

Prova ad aggiungere alcuni tipi di riga diversi e ridimensionando lo schermo. Vedrai come tutto si sposta e si adatta senza rompersi. Questa è la forza di Flexbox cotta nel costruttore, rendendo Divi 5 un'opzione più affidabile e moderna.

Come funziona Flexbox in Divi 5

Se stai iniziando, ecco una rapida procedura dettagliata per aiutarti a sentirti sicuro quando usi Flexbox in Divi 5.

Controlli di layout

Quando si cambia una sezione, una riga o una colonna per flettere layout, nelle impostazioni di layout di progettazione> un nuovo set di controlli di layout. Questi ti danno il controllo visivo Flexbox proprio insieme alle solite opzioni.

• (1) Stile di layout: è qui che si attiva Flex. Una volta impostati, altre opzioni specifiche per flessione come la direzione, l'allineamento e la spaziatura diventano visibili.
• (2) Gap orizzontale: aggiunge spazio tra gli elementi da sinistra a destra.
• (3) Gap verticale: imposta lo spazio tra gli elementi impilati quando si utilizzano layout della colonna.
• (4) Direzione di layout: modifica le direzioni di flusso, riga, colonna o invertita, in modo che gli elementi possano allinearsi fianco a fianco o in alto verso il basso.
• (5) Giustifica il contenuto: allinea gli elementi lungo l'asse principale. Puoi centrali, spingerli da un lato o distribuirli.
• (6) Allinea gli elementi: allinea gli elementi lungo l'asse incrociato, che è utile quando si dispone di elementi verticalmente all'interno di una riga orizzontale.
• (7) Avvolgimento del layout: questo consente agli elementi di passare alla riga successiva quando lo spazio si esaurisce. Utile durante la costruzione di layout che rispondono alle dimensioni dello schermo anziché alla rottura.

Supponiamo che tu abbia una barra di marca con i loghi e vuoi che siano più grandi. Con la direzione Flex impostata su riga e layout avvolgenti, fluiranno automaticamente in due righe quando non c'è spazio.

Allineare elementi in due righe è ora facile senza domande sui media o una soluzione alternativa manuale.

Controlli e dimensionamento della colonna

Una volta all'interno di una riga abilitata per flessione, ogni colonna ha una nuova impostazione in Design> dimensionamento chiamato classe colonna . Ciò determina quanto spazio una colonna occupa in base al suo contenuto e dintorni.

Puoi scegliere tra il restringimento per adattarsi (che rende la colonna solo ampia del suo contenuto) o crescere per riempire (che allunga la colonna per occupare spazio extra).

Ad esempio, se si desidera che una colonna di testo si senta più importante e abbia elementi di carta che abbracciano i loro contenuti, imposteresti le carte per ridurre e il testo per riempire.

Controlli dell'ordine

Un altro strumento potente, ma spesso trascurato, è l'impostazione dell'ordine nella scheda Contenuto . Ciò consente di riordinare visivamente colonne e moduli senza modificare la struttura del layout in vista wireframe o strati.

Supponi che vuoi che un modulo particolare appaia per primo sul cellulare ma secondo su desktop. È possibile assegnare valori di ordine diversi ad ogni punto di interruzione.

Casi d'uso pratici di Flexbox

Diamo un'occhiata ad alcuni altri casi d'uso Flexbox che ora sono semplificati con Divi 5.

1. Allinea verticalmente qualsiasi cosa con flessione

Per molto tempo, l'allineamento verticale è stato uno dei problemi di layout più fastidiosi del web design. Proveresti a imbottire trucchi, posizionamento assoluto, margini manuali e quant'altro per finire con qualcosa che sembrava a posto sui desktop ma che era rotto su schermi più piccoli.

Con Divi 5, quel mal di testa è sparito. Ora, se si desidera centrare il contenuto verticalmente all'interno di una sezione, basta impostare gli elementi di allineamento .

Questo è tutto. Il layout si regola automaticamente nei punti di interruzione e i tuoi contenuti rimangono sempre nel punto debole. Ciò che prendeva la ginnastica CSS è ora solo un paio di clic all'interno del costruttore.

2. Equalizzare automaticamente le altezze della carta

Probabilmente hai già riscontrato questo problema. Crei una fila di carte, come una sezione Blurb, e tutto sembra a posto fino a quando un elemento non ha più testo rispetto agli altri. Improvvisamente, il tuo layout sembra irregolare. Alcune colonne si estendono più alte, altre rimangono brevi e il design perde equilibrio.

Quella pulizia manuale non è più necessaria. Quando si cambia una riga o una sezione su Flex, Divi applica impostazioni predefinite che trattano ogni colonna come elemento flessibile. Questo li fa allungare automaticamente per abbinare l'altezza dell'altro all'interno della stessa riga, indipendentemente dal contenuto all'interno.

Rimane anche reattivo. Su schermate più piccole, le colonne si avvolgono in nuove righe senza bisogno di ulteriori modifiche e il comportamento di altezza uguale continua ad applicare.

3. Avvolgi automaticamente i pulsanti attraverso i punti di interruzione

Mantenere una fila di pulsanti puliti e leggibili in diverse dimensioni dello schermo può essere un dolore. Di solito finisci per aggiungere nuove righe o regolare manualmente il layout per ogni punto di interruzione. Ma con Divi 5, non è più necessario.

Accendi il layout Flex e abilita il layout avvolgente nella vista del laptop . Questo è tutto. I pulsanti si avvolgeranno automaticamente in più righe su schermi più piccoli senza rompere il layout.

I pulsanti mantengono la spaziatura e l'allineamento su schermi più grandi e si staccano naturalmente su tablet e telefoni. Puoi persino perfezionare il loro allineamento usando il contenuto di giustificazioni e la spaziatura di controllo tra loro usando GAP, quindi tutto sembra pulito e intenzionale ad ogni dimensione.

Divi + Flexbox ha senso

Hai visto come funziona Flexbox, come Divi 5 lo rende visivo e come il mal di testa del layout ora richiede secondi anziché ore. Divi 5 non supporta solo Flexbox: è costruito attorno a esso. Ogni sezione, riga e colonna è pronta a comportarti come ti aspetteresti senza CSS personalizzato.

Flexbox non è solo un'opzione se stai progettando con Divi 5. È il valore predefinito più intelligente. Layout più pulito, meno soluzioni alternative e controllo reattivo cotto direttamente nel costruttore. Questo è il turno, ed è qualcosa che ti prepara per il futuro del web design.