Oggi parliamo di Flexbox CSS in Divi, ma senza farla troppo lunga o “da manuale”. Se ti è mai capitato di sistemare un layout in Divi con margini e padding un po’… a sentimento (10px qui, 30px lì, “ok dai su mobile vediamo”), e poi ritrovarti con colonne che non si allineano, card che hanno altezze strane o spaziature incoerenti… ecco, Flexbox è uno dei modi più puliti per uscirne.

È un argomento super utile se devi impaginare velocemente sezioni tipo: servizi a schede, liste di feature, griglie prodotti, blocchi portfolio. Tutte cose che devono rimanere ordinate su desktop, tablet e mobile, senza “esplodere” alla prima variazione di contenuto.

Ti porto quindi nel mondo di Flexbox: prima ti spiego le proprietà base (in modo semplice), poi ti faccio vedere come Divi 5 le traduce in controlli visuali (pulsanti, slider, opzioni chiare). E sì: io per primo ci ho sbattuto la testa prima di smettere di risolvere tutto a colpi di margin-bottom.

Che cos’è Flexbox in CSS?

Quando il traffico mobile ha superato quello da desktop, il web design ha dovuto cambiare marcia. Servivano layout che funzionassero bene su telefono, tablet e desktop. I metodi più vecchi spesso fallivano o richiedevano troppi “trucchetti”.

Flexbox ha risolto molti di questi problemi. Con Flexbox in CSS, gli elementi si adattano meglio allo spazio disponibile. Se applichi display: flex a un contenitore, i suoi figli diretti diventano “flessibili”: possono crescere, restringersi o restare fissi a seconda dello spazio.

Flexbox dispone gli elementi in una linea (un solo asse alla volta): o in riga (da sinistra a destra) o in colonna (dall’alto in basso). La direzione la decidi tu.

È il contenitore a comandare il layout: imposti come gli elementi si allineano e come si distribuiscono (per esempio centrati, distanziati in modo uniforme, “impilati”). La proprietà gap aggiunge uno spazio costante tra gli elementi senza dover impazzire con margini e padding. Con le tecniche vecchie, bastava cambiare un layout per ritrovarsi a fare calcoli sui margini e ottenere risultati incoerenti.

Il metodo tradizionale porta spesso a scelte casuali: 10px qui, 20px là, 40px da un’altra parte. Questi valori sparsi creano incoerenze e rendono difficile capire quale spaziatura sia quella “giusta”. Le proprietà gap tolgono il dubbio: una regola unica e coerente per tutti gli elementi.

Guida rapida a Flexbox e alle sue proprietà

Flexbox si divide in due famiglie: proprietà del contenitore e proprietà dei singoli elementi. Le proprietà del contenitore influenzano il gruppo, mentre quelle dei singoli elementi servono per rifinire comportamenti specifici. Nella maggior parte dei layout ti bastano poche proprietà, come queste:

display: flex

Trasformi qualsiasi elemento in un contenitore Flexbox aggiungendo display: flex. In pratica stai dicendo al browser: “da qui in poi, gestisci gli elementi interni con le regole di Flexbox”.

I figli diretti diventano elementi flex. Di default si dispongono in riga, invece di impilarsi come i classici blocchi. Qui spariscono molti “mal di testa” di spaziatura, perché gli elementi flex seguono regole diverse da quelle dei normali elementi.

Da questo momento è il contenitore a controllare come si comportano i figli (gli elementi), e ottieni risultati più prevedibili rispetto alle classiche sorprese di CSS.

flex-direction

Scegli la direzione in cui scorrono gli elementi. In pratica: decidi se vuoi che i contenuti vadano “in orizzontale” o “in verticale”.

Usa row per un layout da sinistra a destra.

Oppure column per impilare gli elementi in verticale.

Aggiungendo reverse a una delle due, inverti completamente l’ordine degli elementi (cioè il primo diventa ultimo e viceversa).

Questa scelta definisce l’asse principale, che influenza anche il comportamento delle altre proprietà.

Per esempio, passare da riga a colonna cambia come lavorano justify-content e align-items. Per questo la direzione viene prima, quando pianifichi un layout.

justify-content

Questa proprietà distribuisce lo spazio “avanzato” lungo l’asse principale. Tradotto: gli elementi occupano lo spazio che serve, poi justify-content decide cosa fare con lo spazio rimasto.

• flex-start: li spingi all’inizio
• center: li raggruppi al centro
• flex-end: li porti alla fine

In più, hai le opzioni per distribuire lo spazio:

• space-between: spazi uguali tra gli elementi (tipico per menu o card)
• space-around: spazio su entrambi i lati di ogni elemento (quindi bordi esterni “mezzi” rispetto agli interni)
• space-evenly: distanze identiche ovunque, anche ai bordi

align-items

Gestisce l’allineamento sull’asse trasversale (cioè quello “perpendicolare” alla direzione).

• Se sei in row (riga), significa allineamento verticale
• Se sei in column (colonna), controlla il posizionamento orizzontale

Supporta valori come flex-start, center, flex-end, stretch e baseline (qui non esistono i valori space-*).

Se lo imposti su center, gli elementi si allineano al centro anche se hanno altezze diverse. Il valore predefinito è stretch: gli elementi si “stirano” per riempire la dimensione del contenitore sull’asse trasversale.

flex-wrap

Decide cosa succede quando non c’è più spazio. Qui la domanda è semplice: “li faccio andare a capo o li obbligo a stare tutti sulla stessa riga?”

• nowrap (predefinito): mantiene tutto su una riga, restringendo gli elementi per farli stare
• wrap: gli elementi che non ci stanno vanno a capo su nuove righe, mantenendo meglio la loro dimensione “naturale”
• puoi anche invertire il verso dell’andata a capo

Con l’andare a capo, la “linea singola” diventa multi-linea, e puoi ottenere layout che ricordano una griglia.

gap

Aggiunge spazio tra gli elementi senza sporcare tutto con margini. Se imposti gap: 20px, ogni elemento avrà una distanza coerente dagli altri. Se ti serve, puoi differenziare gap orizzontale e verticale.

Lo spazio appare solo tra gli elementi, non sui bordi esterni del contenitore. È molto più robusto rispetto ai margini, che spesso vanno ricalcolati quando cambi layout.

Una volta capite, queste proprietà si combinano bene. La parte “noiosa” è ricordarsi i nomi, scrivere tutto il CSS e fare tentativi: scrivi, aggiorni, non è perfetto, ritocchi, e così via. I builder visuali come Divi ribaltano la logica: invece di digitare proprietà, usi controlli chiari a schermo.

Divi 5 rende Flexbox visuale

Imparare Flexbox è una cosa; sapere cosa fa justify-content: space-between perché lo vedi subito davanti agli occhi è un’altra. Spesso, pur sapendole, finisci per perdere più tempo a scrivere proprietà che a progettare.

In Divi 5 i concetti di Flexbox diventano controlli visuali: pulsanti e slider che mostrano subito l’effetto di ogni opzione nel builder. In pratica, Flexbox CSS in Divi diventa un modo concreto e veloce per gestire allineamenti, spazi e layout responsive senza dover mettere mano al codice.

Che cos’è Divi (in breve)

Divi è un builder per WordPress che ti permette di costruire pagine in modo visuale: aggiungi moduli, li sposti, cambi testi e stili vedendo subito il risultato sulla pagina.

Panoramica rapida della configurazione Flexbox in Divi 5

L’approccio visuale di Divi 5 toglie molta incertezza dall’implementazione di Flexbox. Invece di memorizzare proprietà e scrivere CSS, hai controlli che mostrano chiaramente cosa succede quando cambi un’impostazione.

1. Impostare la tua prima riga Flex

Parti scegliendo la struttura della riga dalla selezione di modelli ampliata. Divi 5 offre più opzioni di layout, incluse colonne uguali, griglie multi-riga e configurazioni multi-colonna.

Le nuove sezioni in Divi 5 partono automaticamente con Flexbox. Quando aggiungi una nuova riga, trovi già le proprietà flex attive.

Se invece stai lavorando su sezioni create con versioni precedenti, spesso devi passare manualmente dal layout a blocchi a Flex:

• apri le impostazioni della riga
• vai in Design > Layout
• cambia “Blocco” in “Flex”

2. Capire direzione, flusso e allineamento

Il campo Direzione layout decide dove finiscono gli elementi.

Riga è l’impostazione predefinita, quindi gli elementi si allineano orizzontalmente.

Se passi a Colonna, gli elementi si impilano in verticale come nei layout web più tradizionali.

Entrambe le opzioni hanno la versione “invertita” che ribalta completamente l’ordine.

Nel frattempo, Giustifica contenuto decide come gestire lo spazio avanzato sull’asse principale:

• in una riga: start = sinistra, center = centro, end = destra
• in una colonna: start = alto, center = centrato, end = basso

Oltre a start/center/end, hai anche le varianti di distribuzione dello spazio:

• spazio tra (equivalente a space-between): perfetto per menu di navigazione o card
• spazio intorno (space-around): crea “respiro” costante
• spazio uniforme (space-evenly): rende identiche tutte le distanze

Allinea elementi lavora perpendicolarmente alla direzione:

• se sei in riga, controlla l’allineamento verticale
• se sei in colonna, controlla l’allineamento orizzontale

Center allinea tutto al centro, start all’inizio, end alla fine, stretch “riempie” lo spazio disponibile.

Questi controlli risolvono tanti problemi di impaginazione senza calcoli a mano in CSS.

3. Distanziare gli elementi con i controlli Gap

I controlli Gap aggiungono spazio tra gli elementi flex nel contenitore: colonne, moduli e altri contenuti. Il gap crea respiro senza complicazioni di padding o margini. E, cosa importante, il gap appare solo tra gli elementi, non sul bordo esterno.

Imposti per esempio un gap orizzontale a 20px e tutte le colonne avranno quella distanza.

Se cambi il gap verticale a 20px, tutto si aggiorna subito.

Divi 5 supporta unità CSS avanzate come valori in percentuale e in base al viewport (cioè la dimensione dello schermo).

Puoi usare clamp() (un valore “intelligente” che cresce o diminuisce con lo schermo entro un minimo e un massimo) per gap responsive che scalano tra varie dimensioni. È supportata anche calc() (una “formula” per combinare unità, tipo calc(2rem + 10px)).

I controlli Gap supportano anche le Variabili di design (valori globali riutilizzabili). Per esempio: crei una variabile numerica chiamata “Gap orizzontale colonne” con valore clamp(16px, 2vw, 32px) e la applichi ai gap in tutto il sito.

Quando in futuro vorrai una spaziatura più stretta, modifichi la variabile una sola volta e tutti i gap si aggiornano.

4. Controllare l’andata a capo degli elementi

Il controllo di “wrapping” (cioè andata a capo) decide cosa succede quando non c’è abbastanza spazio in orizzontale.

• Con nessun a capo (no wrap) tutto resta su una riga e gli elementi si restringono per farcela
• Con a capo (wrap) quelli che non ci stanno scendono su righe successive mantenendo meglio le dimensioni
• A capo invertito (wrap reverse) fa la stessa cosa, ma le nuove righe compaiono sopra invece che sotto

Questo ti aiuta a gestire la gerarchia visiva quando il contenuto “sfora”. Il comportamento resta coerente sui vari schermi: dal desktop al mobile il layout si adatta senza rompersi.

Divi 5 include anche l’allineamento delle righe in wrapping: compare quando abiliti l’andata a capo e hai più linee.

Se la direzione è riga, l’allineamento delle linee è verticale.

Se la direzione è colonna, le opzioni diventano orizzontali.

Stretch espande le linee per riempire lo spazio disponibile. Start raggruppa le linee all’inizio, center le mette al centro, end le spinge al lato opposto. Hai anche spazio tra/spazio intorno/spazio uniforme per distribuire le linee.

È perfetto per card, gallerie immagini o contenuti che devono scorrere su più righe in modo naturale. Gli elementi mantengono proporzioni e spaziatura mentre si riordinano in base alla larghezza. Su schermi piccoli eviti l’effetto “tutto schiacciato”.

5. Lavorare bene su schermi diversi

Divi 5 offre sette breakpoint (cioè “tagli” di schermo) per controllare con precisione come si adatta il layout.

Ogni breakpoint è indipendente: puoi usare direzione Colonna su mobile e lasciare la direzione Riga su desktop. Magari su telefono centri tutto, mentre su schermi grandi tieni “spazio tra” per distribuire le card.

Un layout a tre colonne su desktop può diventare una colonna singola su mobile senza rovinare le misure intermedie. Ogni dimensione schermo riceve quello che serve davvero.

Il nuovo Editor responsive (un pannello che ti fa vedere e modificare i valori per più schermi senza saltare avanti e indietro tra modalità) rende il lavoro più veloce. E se usi clamp() per i gap, in molti casi la spaziatura si adatta automaticamente riducendo la necessità di regolazioni manuali.

6. Creare preset di gruppi di opzioni

Quando il tuo layout Flexbox è a posto, puoi salvare quelle impostazioni come Preset di gruppo di opzioni (cioè una combinazione di settaggi riutilizzabile) cliccando sull’apposita opzione e dandole un nome chiaro.

Valori di gap, allineamenti e wrapping vengono salvati insieme. Così puoi riapplicarli su nuove righe in pochi clic, mantenendo coerenza in tutto il sito.

Il preset conserva anche unità avanzate e valori responsive: quindi ti porti dietro la logica “intelligente” che hai impostato (anche su breakpoint diversi).

Esempi pratici (senza codice) per usare Flexbox in Divi 5

Qui sotto trovi tre casi tipici, con passaggi concreti. L’idea è applicare Flexbox in modo “da lavoro”, non teorico.

Esempio 1: sezione servizi con 3 card allineate e spaziatura coerente

Obiettivo: tre riquadri (Servizio 1/2/3) ben distanziati su desktop e impilati su mobile, senza risistemare margini a mano.

Passi:

• Imposta una riga in Flex
• Direzione = Riga
• Giustifica contenuto = Space between
• Allinea elementi = Stretch
• Imposta Gap orizzontale (es. 24px)
• Vai su mobile e cambia Direzione = Colonna, mantenendo lo stesso gap (o riducendolo)

Risultato: card coerenti e responsive senza “spazi random”.

Esempio 2: griglia prodotti in sezione home con wrapping pulito

Obiettivo: una griglia di prodotti/collezioni che va a capo in modo ordinato quando lo schermo si restringe.

Passi:

• Direzione = Riga
• Abilita Wrapping = A capo
• Imposta Gap orizzontale e verticale (es. 20px / 20px)
• Se vuoi un look più bilanciato, usa Giustifica contenuto = Space evenly

Risultato: quando lo spazio finisce, gli elementi scendono di riga con spazi identici, senza dover fare “matematica dei margini”.

Esempio 3: layout ripetibile per liste di categorie o blocchi progetto

Obiettivo: creare un layout standard per più pagine (categorie, portfolio, servizi) mantenendo coerenza su tutto il sito.

Passi:

• Scegli una configurazione Flex che funziona (Direzione, Allineamenti, Gap, Wrapping)
• Se usi gap responsive, imposta un valore con clamp()
• Salva tutto come Preset di gruppo di opzioni
• Applica il preset su nuove righe: stesso allineamento, stessa spaziatura, stesso comportamento su mobile

Risultato: meno tempo perso e meno incoerenze tra pagine diverse.

Conclusione

Flexbox ti permette di gestire allineamenti, spaziature e responsive senza ricorrere a margini “a caso” che poi vanno sistemati pagina per pagina. In Divi 5 questi concetti diventano controlli visuali: direzione, distribuzione dello spazio, allineamento, gap e wrapping si impostano in modo chiaro e riutilizzabile.

Consiglio pratico (proprio da “lavoro vero”): prendi una sezione del tuo sito—card servizi, griglia prodotti, blocchi portfolio—e rifalla usando gap e wrapping al posto di margini e padding. Di solito è lì che vedi subito la differenza.

Se poi ti incarti su impostazioni responsive, breakpoint o vuoi impostare una logica di layout coerente su tutto il progetto, ha senso farsi dare una mano da uno sviluppatore Divi di fiducia: a volte bastano 30 minuti per evitare ore di tentativi.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes