Flexbox sembra semplice finché hai due elementi in fila. Poi aggiungi un logo, un menu, un pulsante, una descrizione più lunga del previsto e un breakpoint in più. A quel punto iniziano gli spazi “misteriosi”, gli allineamenti a caso e i moduli che su telefono decidono di vivere una vita propria.

In questa parte mettiamo ordine e affrontiamo Flexbox in Divi 5 come un sistema. Vedremo contenitore, direzione, distribuzione, allineamento, gap, wrapping e dimensioni degli elementi. Non serve imparare a memoria tutti i controlli: serve capire quale domanda risolve ciascuno.

Se devi ancora installare il tema, nella pagina trovi il link per acquistare Divi. Se invece vuoi un ripasso più generale prima di iniziare, puoi leggere la guida alle proprietà Flexbox, ai gap e agli allineamenti.

Capire contenitore, elementi e asse principale

In Flexbox c’è un contenitore e ci sono gli elementi al suo interno. Nel builder, una riga può distribuire le colonne; una colonna o un Gruppo può distribuire i moduli. La prima decisione è la direzione: Row dispone gli elementi lungo una riga, mentre Column li impila verticalmente.

La direzione stabilisce anche l’asse principale. Con Row, l’asse principale è orizzontale; con Column è verticale. Per questo Justify Content non significa sempre “allinea in orizzontale”: distribuisce gli elementi lungo l’asse principale. Align Items lavora invece sull’asse trasversale.

Se ti ricordi soltanto questa distinzione, hai già risolto buona parte delle confusioni. Quando un controllo sembra fare il contrario di ciò che ti aspetti, verifica prima la direzione del contenitore.

Passiamo alla distribuzione.

Justify Content decide come viene usato lo spazio disponibile lungo l’asse principale. Puoi allineare all’inizio, al centro o alla fine, oppure distribuire lo spazio con Space Between, Space Around e Space Evenly.

Align Items gestisce invece l’asse trasversale. Center centra gli elementi; Stretch può estenderli; Start ed End li avvicinano ai bordi. Queste impostazioni agiscono sul gruppo, mentre le opzioni del singolo elemento permettono eccezioni mirate.

Per esempio, in un header puoi usare Row, Space Between e Center per tenere logo e navigazione ai lati e allinearli verticalmente. In una card puoi usare Column e Space Between per mantenere il pulsante in fondo anche quando le descrizioni hanno lunghezze diverse.

Usare gap e wrapping senza rincorrere i margini

Il gap crea spazio coerente fra gli elementi del contenitore. È spesso più pulito dei margini applicati a ogni modulo, perché il rapporto viene gestito nel punto in cui nasce: il contenitore. Puoi controllare separatamente gap orizzontale e verticale e collegarli alle variabili di design.

Il wrapping permette agli elementi di andare su una nuova riga quando non c’è abbastanza spazio. È essenziale per griglie, gruppi di pulsanti e footer a colonne. Senza wrapping, gli elementi possono restringersi troppo o uscire dal contenitore.

Attivare Wrap, però, non conclude il lavoro. Devi verificare la larghezza degli elementi nei diversi breakpoint e lo spazio verticale fra le righe create. Per casi concreti puoi consultare la guida alle colonne responsive con Flexbox in Divi 5.

Non tutti gli elementi devono occupare lo stesso spazio.

Gli elementi Flex possono crescere per occupare lo spazio disponibile o restringersi quando lo spazio manca. Nel builder queste scelte compaiono nelle impostazioni di dimensionamento. Grow to Fill è utile quando un gruppo deve espandersi, per esempio la zona centrale di un header.

Non usare la crescita come rimedio universale. Prima definisci quali elementi hanno una dimensione naturale e quali devono assorbire lo spazio residuo. Logo e icone hanno spesso dimensioni controllate; contenuto testuale e gruppi di navigazione possono essere più flessibili.

Quando serve una struttura bidimensionale con righe e colonne controllate insieme, Grid può essere più adatto. La guida su quando usare Grid o Flexbox ti aiuta a scegliere in base al problema, non alla funzione che hai voglia di provare quel giorno.

Applicare Flexbox ai layout reali

Riprendi header, footer e pagine interne costruiti nelle parti precedenti. Nell’header individua contenitore principale, gruppo del logo e navigazione, elementi che crescono e moduli che spariscono ai breakpoint. Nel footer osserva wrapping e larghezze delle colonne. Nelle card verifica come l’allineamento mantiene ordinati titoli e pulsanti.

Prova poi a modificare deliberatamente una proprietà alla volta. Cambia direzione, distribuzione o allineamento e osserva cosa succede anche con contenuti di lunghezza diversa. È un esercizio più utile di copiare dieci valori senza capire perché funzionano.

Infine testa tutti i breakpoint con l’Editor Responsive. Flexbox rende i layout adattabili, non automaticamente perfetti. Contenuti reali, lingue diverse, titoli lunghi e menu più affollati restano il banco di prova. Controlla anche cosa succede quando un elemento manca o raddoppia: è lì che capisci se il layout è davvero flessibile. Nella parte 11 passeremo a CSS Grid e vedremo quando una struttura a due dimensioni offre un controllo migliore.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.