5 insidie da evitare quando si passa al sistema di layout Flexbox di Divi 5

Divi 5 ha appena spedito il suo sistema di layout a base di Flexbox All -New. Sostituisce il vecchio motore di layout a blocchi di Divi 4 e sblocca potenti nuovi controlli direttamente nel Visual Builder. Ogni nuova riga ora è impostata predefinita per Flex Layout. A meno che tu non abbia già usato CSS Flexbox, questo cambiamento richiede una nuova mentalità di progettazione perché Flex funziona in modo diverso. Se non regoli le tue abitudini, rimarrai bloccato.

Questo aggiornamento ti dà controlli visivi per avvolgimento, direzione, spaziatura, ordinazione e allineamento - tutti integrati. Nessun CSS personalizzato hacky. Viene inoltre fornito con scorciatoie di riga preconfigurate per costruire strutture di riga complesse con una modifica minima delle impostazioni del display. Alcune funzionalità a blocchi, come le sezioni speciali e a pieno livello, sono deprecate perché Flex ora copre tutti questi casi d'uso.

Questo post entra nelle cinque più grandi insidie che colpisci quando cambierai il tuo modello mentale da blocco a Flex in Divi 5.

Insidua n. 1: forzando la flessione in una mentalità di blocco

→ Flex richiede un nuovo modello mentale, non solo nuovi controlli.

A nessuno piace il cambiamento a meno che non sappiano che stanno raggiungendo limiti molto reali. Per molti, il vecchio sistema di layout è ciò che sapevano e con cui erano a proprio agio. Ma aveva i suoi limiti. Coloro che sapevano abbastanza di CSS sapevano che al vecchio sistema mancava le cose che Flexbox era progettata per rimediare. Evitare la prima insidia richiede la comprensione che Flexbox non è solo un layout a blocchi con opzioni extra .

In Divi 4, i moduli sono impilati verticalmente per impostazione predefinita - ogni elemento sedeva sotto quello prima di esso. Potresti impilare le cose in orizzontale con colonne, ma a quel punto lavoreresti con più righe + colonne all'interno di una sezione per creare un layout. Questo era prevedibile e comodo per molti, ma ha anche portato alla realtà frustrante di non essere in grado di avere due pulsanti fianco a fianco e altre sfide di progettazione.

Divi 5 funziona in modo diverso ora perché i nuovi contenitori (cioè sezioni, righe, colonne e gruppi) sono impostati su "Flex" per impostazione predefinita. Ottieni opzioni più specifiche a livello di contenitore per l'organizzazione di elementi figlio. Flexbox è potente perché consente layout flessibili in cui gli elementi sono posizionati in base allo spazio disponibile e al contenuto al loro interno. Maggiori informazioni su questo nella prossima insidia . Ciò consente ai layout di adattarsi alle dimensioni e al contenuto della schermata variabili senza fare affidamento su un posizionamento fisso o assoluto. Ecco solo un esempio per confrontare Flex con Block.

Blocca i moduli di layout impila verticalmente lungo l'asse del blocco. Flexbox ti consente di scegliere tra riga e colonna come asse principale.

Ogni impostazione e opzione nell'interfaccia utente corrispondono direttamente alle proprietà CSS effettive aggiunte a ciascun contenitore.

Insidia n. 2: non sapere come si restringe e cresci il dimensionamento degli elementi del bambino

→ Senza restringere e crescere, i tuoi layout non si comporteranno come previsto.

Con Flex in Divi 5, i moduli per bambini possono avere una larghezza o un'altezza impostata. Inoltre, possono ridurre o riempire (la loro larghezza o altezza) a seconda della stanza all'interno del contenitore. In questo esempio, i moduli di testo sono impostati sulla larghezza del 45%, il che significa che due moduli si adatterebbero orizzontalmente come nella stessa riga. Ma se aggiungiamo un numero dispari di moduli di testo, non vogliamo che ci sia spazio vuoto. Possiamo impostare questi moduli per far crescere Flex, e quindi quando c'è spazio disponibile di fila, questi moduli cresceranno per riempire.

Divi espone controlli come "crescere per riempire", "restringere per adattarsi" e impostazioni personalizzate sugli elementi figlio all'interno di qualsiasi contenitore flessibile (elemento figlio> design> dimensionamento> crescere per riempire, restringere per adattarsi o personalizzare ).

L'impostazione dell'altezza e della larghezza sugli elementi figlio si sente familiare se sei abituato a bloccare i layout. Ma con Flexbox, crescere e ridurre le impostazioni consente di combinare dimensionamento fisso con comportamenti reattivi, adattandosi allo spazio disponibile in ciascun contenitore. Aggiunge complessità, ma sblocca anche molta più flessibilità.

Ridurre per adattarsi e crescere per riempire (oltre a Flex-Basis) sono anche molto utili per aiutarti a creare layout reattivi. Affinché i layout di blocco siano spesso reattivi, è necessario impostare più punti di interruzione e larghezza/altezze in ciascuno di questi punti di interruzione. Flexbox può beneficiare di impostazioni uniche in vari punti di interruzione, ma come suggerisce il nome, è molto flessibile . Questo è particolarmente vero quando si utilizza il clamp () per la tipografia. Usando entrambi insieme, insieme ad altre unità CSS relative, romperà la costante necessità di punti di interruzione.

Diamo un'occhiata a un altro esempio costruito con Flexbox.

Il contenitore della colonna (genitore) è impostato su Flex con queste impostazioni:

• Gap orizzontale e verticale : 30px (questo potrebbe usare calc o morsetto per essere un po 'migliore, pari)
• Direzione di layout : riga inversa (spiegazione di questa decisione in insidica n. 4)
• Giustifica il contenuto : Centro
• Allinea gli articoli : al centro
• Flex Wrap : Wrap Reverse (spiegazione per questa decisione in insidica n. 4)

Ho quindi posizionato tre elementi figlio all'interno della colonna. Un modulo di intestazione, modulo divisore e un modulo di testo. Ecco le impostazioni pertinenti per ciascuno:

• Modulo di testa
  • Dimensione del testo : morsetto (2Rem, 1.5Rem + 2VW, 3Rem)
  • Larghezza : auto
  • Dimensione flessibile : restringersi per adattarsi
• Modulo divisore
  • Larghezza : auto
  • Dimensione flessibile : ridursi per adattarsi e crescere per riempire
• Modulo di testo
  • Dimensione del testo : morsetto (0,9375REM, 0,75REM + 0,4VW, 1REM)
  • Larghezza : auto
  • Dimensione flessibile : restringersi per adattarsi

Con una direzione flessibile di riga, gli elementi dei bambini si allineano orizzontalmente ogni volta che c'è spazio. Il modulo di testo è il più largo, quindi riempie la propria riga. Il modulo divisore cresce o si restringe poiché ha abilitato la larghezza automatica e la crescita flessibile e la flessione. Il modulo di intestazione utilizza solo la sua larghezza intrinseca e rimane compatto. Questa configurazione produce un layout completamente reattivo senza alcun punto di interruzione.

Insidia n. 3: non rompere l'abitudine del margine

→ Usa invece Gap: è più intelligente, più pulito e realizzato per Flex.

In Divi 4, le lacune visive tra moduli e altri elementi hanno richiesto margini (lacune verticali tramite il margine inferiore, lacune orizzontali tramite il margine sinistro/destro). Quando il divario è stato applicato alla spaziatura delle colonne, Divi 4 aveva un'impostazione della grondaia, ma non ha impiegato valori CSS standard e in realtà ha usato il margine ai lati delle colonne per creare il gap. Questo è lo stesso modo in cui i layout di blocco funzionano ancora. Ma ora c'è un approccio più pulito e più efficace.

Il sistema Flexbox di Divi 5 introduce controlli di gap di riga e verticale in design> Layout > Gap orizzontale e verticale . Queste mappe a CSS Gap e Row-Gap. Lacune verticali si applicano automaticamente a ciascuna "riga flessibile" quando gli articoli si avvolgono su una nuova linea. Lo stesso vale per le lacune orizzontali: ogni volta che ci sono elementi figlio uno accanto all'altro, il divario sarà presente. Queste impostazioni di gap accettano anche qualsiasi unità CSS positiva, quindi è possibile utilizzare il clamp () o calc () per creare spaziature di gap reattive.

Ciò riduce la necessità di applicare i valori del margine a ogni elemento figlio. L'impostazione GAP si adatta automaticamente in base alla direzione Flex e al numero di bambini nel contenitore per applicare automaticamente eventuali lacune. I margini hanno ancora il loro posto, ma è ridotto il loro bisogno di elementi di spaziatura all'interno di un contenitore.

Insidia n. 4: Flusso inverso e controlli di ordinazione.

→ L'ordine visivo e l'ordine semantico non devono corrispondere.

Per impostazione predefinita, gli elementi figlio in un contenitore Flex verranno visualizzati nel loro ordine di origine. Flexbox e Divi 5 ti danno la possibilità di specificare le direzioni inversa e ordini per modificare il flusso visivo degli elementi senza modificare l'ordinamento di elementi HTML.

La direzione inversa in attivazione nella direzione di layout consente di invertire l'ordine degli elementi nella direzione della riga o della colonna. Per guardare di nuovo l'esempio di layout di insalling #2, possiamo capire perché vorremmo questo. Nell'opinione dei livelli puoi vedere che l'ordine degli elementi figlio è l'intestazione, quindi il divisore e infine il modulo di testo. Semanticamente, avere l'intestazione (un H2 in questo caso) nella parte superiore dello stack ha senso per i lettori di screen. Tuttavia, l'intestazione è abbastanza evidente visivamente, prima o ultima, poiché stiamo usando una gerarchia visiva con la dimensione del testo.

L'uso della riga inversa come direzione flessibile e avvolgimento inverso mantiene l'ordinamento HTML (importante per l'accessibilità), consentendo anche di progettare le cose come li immaginiamo.

È possibile ottenere lo stesso ordinamento degli elementi figlio, che si trova in Divi quando fai clic sulle impostazioni di un elemento figlio> TABUTTURA DI CONTENUTO> ORDINE . Possiamo cambiare l'ordine in cui apparirà solo questo elemento. In questo esempio, otteniamo lo stesso risultato finale, ma con un'impostazione diversa, che potrebbe avere più senso per alcuni.

Insidua n. 5: dimenticando di impostare l'involucro

→ Flex non si romperà su nuove righe se non lo dici.

Abbiamo menzionato la confezione in precedenza, ma merita la sua sezione. Nuovi contenitori flessibili predefiniti a nessuna avvolgimento. Questo può avere conseguenze inaspettate. Ad esempio, se aggiungi quattro moduli per bambini, ciascuno al 50% di larghezza, ti aspetteresti che si mostrino su due righe flessibili. Il tuo problema è semplicemente che devi consentire al tuo contenitore di avvolgere.

Divi include un interruttore chiamato layout avvolgimento, che ha tre stati: no-wrap, avvolgimento e avvolgimento. È necessario abilitare l'involucro se si desidera che i moduli si rompano su nuove linee a soglia. È così che Divi supporta strutture multi-file all'interno di un singolo contenitore (le righe nidificate o più non sono l'unico modo per farlo ora).

Prenditi il tuo tempo per padroneggiare Flexbox

Flex in Divi 5 è più potente del precedente sistema di layout solo a blocchi di Divi. Tuttavia, richiede un po 'di apprendimento per capire. FlexBox non è un'impostazione specifica per Divi, quindi è importante conoscere le basi di come funziona questo strumento CSS. Divi semplifica l'implementazione poiché tutte le impostazioni che puoi applicare in CSS sono disponibili direttamente nell'editor. Ma il concetto è molto diverso dal blocco.

A causa di queste differenze, ti consigliamo vivamente di passare un'ora a utilizzare uno strumento di insegnamento interattivo per comprendere Flexbox. Uno che è facile da usare e fa davvero il trucco è FlexboxFroggy.com. Ti porta attraverso 24 sfide progressivamente complesse, insegnandoti tutte le basi. È molto meglio del doomsrolling per un'ora.

Usa Flex con Divi 5 oggi

Flexbox in Divi 5 è onesto. Non indovina quello che vuoi. Ti chiede di decidere. Ma una volta che decidi, la flessibilità segue. Puoi costruire ogni struttura di layout in modo responsabile, in modo responsabile e in modo affidabile - anche infinitamente nidificato - senza CSS o hack personalizzati.