Comprensione di ogni singola impostazione Flexbox in Divi 5

Flexbox e Divi 5 sono un duo potente che consente agli utenti Divi di creare layout straordinari e reattivi. In questo post, forniremo la guida definitiva alla comprensione e all'utilizzo di ogni impostazione Flexbox per creare facilmente layout flessibili e reattivi.

Flexbox è al centro del rinnovato costruttore Visual di Divi 5, consente agli utenti di creare splendidi design con un controllo senza pari. Il sistema di layout Flexbox di Divi 5 rende i layout complessi un gioco da ragazzi, dall'allineamento dei contenuti alla costruzione di griglie dinamiche.

Immergiamoci.

Cos'è Flexbox?

Flexbox è un modello di layout CSS progettato per facilitare l'organizzazione, l'allineamento e la distribuzione di elementi all'interno di un contenitore, anche quando le loro dimensioni sono dinamiche. A differenza dei tradizionali layout CSS che si basano su galleggianti o posizioni, Flexbox offre un modo intuitivo per costruire progetti flessibili e reattivi, rendendolo una pietra miliare del moderno sviluppo web.

Iscriviti al nostro canale YouTube

Concetti chiave di Flexbox

Flexbox opera attorno a diversi concetti fondamentali:

• Container Flex: l'elemento genitore con display: flex o in linea-flex applicato, stabilendo il contenuto di flessione. Questo contenitore determina come i suoi figli si comportano all'interno del layout.
• Articoli flessibili: i bambini diretti del contenitore Flex, che sono disposti e allineati in base alle proprietà Flex del contenitore.
• Asse principale e asse incrociato: Flexbox opera lungo un asse principale (orizzontale come riga o verticale come colonna) e un asse incrocio perpendicolare. La direzione dell'asse principale può adattarsi a diverse modalità, come la sinistra a destra a sinistra, fornendo flessibilità per i progetti globali.

Flexbox in Divi 5: una nuova era

Il sistema di layout Flexbox di Divi 5 è integrato nel Visual Builder, consentendo agli utenti Divi di creare layout reattivi con controlli intuitivi. Queste impostazioni vengono applicate principalmente a sezioni, righe, colonne e gruppi di moduli, consentendo di manipolare visivamente il comportamento di layout senza scrivere CSS. Flexbox semplifica l'allineamento, il riordino e la trasformazione facilmente gli elementi.

Accesso a Flexbox in Divi 5

L'accesso a Flexbox in Divi 5 è semplice e intuitivo. Apri Visual Builder, aggiungi una nuova riga e vai alla scheda Design. Troverai le impostazioni di Flexbox sotto il menu a discesa del layout.

Queste impostazioni vengono applicate a livello di contenitore Flex (sezioni, righe, ecc.), Controllando il comportamento dei loro elementi flessibili. L'interfaccia di Divi visualizza le impostazioni attraverso opzioni intuitive, rendendo Flexbox facile per gli utenti di tutti i livelli di abilità.

Cammiamo attraverso ogni impostazione in modo da poter capire meglio come funzionano e come usarli per costruire layout.

Scomposizione dettagliata delle impostazioni Flexbox in Divi 5

Di seguito è riportata una guida ad ogni impostazione relativa a Flexbox in Divi 5. Ogni impostazione include il suo scopo, le opzioni disponibili e i casi d'uso pratici per aiutarla ad applicarle in modo efficace.

Stile layout

Flex è l'opzione predefinita nel menu a discesa in stile layout. Quando si imposta un contenitore per flettere, diventa un contenitore flessibile. I suoi elementi di figlio diretti (articoli Flex) possono quindi essere allineati in modo flessibile utilizzando le proprietà CSS Flexbox.

D'altra parte, il blocco è il modo tradizionale in cui Divi ha gestito i layout in passato. Gli elementi all'interno di un contenitore a blocchi sono trattati come elementi a livello di blocco. Ciò significa che generalmente si accumulano verticalmente, assumendo tutta la larghezza disponibile del contenitore principale.

Gap orizzontale e verticale

Nelle impostazioni Flexbox di Divi 5, i controlli di gap orizzontale e verticale funzionano come proprietà Gap CSS. Forniscono un modo efficiente per aggiungere una spaziatura costante tra gli elementi figlio all'interno di un contenitore.

Il divario orizzontale definisce lo spazio tra gli oggetti flessibili quando sono disposti orizzontalmente. Nell'esempio seguente, il divario orizzontale crea lo spazio vuoto tra ogni colonna, ma non sui bordi esterni del contenitore flessibile. Per impostazione predefinita, % è selezionata, ma è possibile utilizzare una qualsiasi delle proprietà CSS di Divi 5 qui.

Il divario verticale definisce lo spazio tra le file di oggetti. Questo diventa incredibilmente importante quando si abilita la confezione di layout (ne parleremo più avanti). Si applica anche quando la direzione del layout è impostata su colonna o inversa colonna .

Direzione di layout

L'opzione di direzione del layout in Divi 5 (proprietà di direzione flessibile in CSS) è uno dei controlli più fondamentali. Determina l'asse primario lungo il quale saranno disposti gli elementi figlio all'interno del contenitore.

Pensalo come impostare il flusso dei tuoi contenuti. Esistono quattro scelte principali: riga, retro inversa, colonna e colonna. La riga è l'impostazione più comune. Gli oggetti flessibili si organizzeranno orizzontalmente, da sinistra a destra. È ideale per la creazione di layout di colonne orizzontali tradizionali, menu di navigazione, elementi fianco a fianco o ogni volta che si desidera che gli articoli fluiscano attraverso la pagina.

Con la riga inversa , gli elementi si dispongono ancora in orizzontale, ma nella direzione opposta.

Quando si seleziona la colonna , gli elementi si dispiegano verticalmente, dall'alto verso il basso. Questa è una buona opzione per i moduli di impilamento all'interno di una singola colonna, creando elenchi verticali di contenuto o layout di costruzione in cui gli elementi devono fluire verso il basso.

La colonna inversa funziona come la colonna, impilando gli elementi all'interno di un contenitore in verticale, ma al contrario.

Giustifica il contenuto

L'opzione di contenuto di Divi 5 (la proprietà giustificata-contenuto in CSS) controlla l'allineamento degli elementi flessibili lungo l'asse principale del contenitore Flex.

Le opzioni includono Start (Flex-Start in CSS), che allinea gli articoli all'inizio dell'asse principale. Centro allinea gli articoli al centro dell'accesso principale. Quando si utilizzala direzione di layout> riga, gli articoli si centrano orizzontalmente. Se si utilizzala direzione di layout> colonna, gli articoli si centrano verticalmente.Fineallinea gli elementi fino all'estremità (a destra o in basso, a seconda della riga o della selezione della colonna).

Usalo spazio tradistribuire uniformemente gli oggetti lungo l'asse principale. Il primo articolo si allinea con l'inizio, mentre l'ultimo si allinea con la fine del contenitore. Lo spazio intorno distribuisce gli oggetti uniformemente lungo l'asse principale, con uguale spazio attorno a ciascun articolo. Infine, lo spazio distribuisce uniformemente oggetti in cui la spaziatura tra due oggetti adiacenti e lo spazio prima del primo e dopo l'ultimo articolo è la stessa.

Allinea gli articoli

Le opzionidi allineamento degli elementi(la proprietà CSS ALIGE-ETSEM) nelle impostazioni Flexbox di Divi 5 controllano il modo in cui gli articoli Flex si allineano lungo l'asse incrociato del contenitore Flex. Questa opzione differisce dal contenuto di giustificare, che allinea gli elementi lungo l'asse principale.

Quando si impostala direzione del layoutsurigaorega inversa, l'asse incrociato diventa verticale. Ciò consentedi allineare gli elementidi controllare l'allineamento verticale degli articoli all'interno di una riga. Se si impostala direzione del layoutsucolonnaoinversa colonna, l'asse incrociato è orizzontale. Pertanto, gli elementi allineati controlleranno l'allineamento orizzontale degli elementi all'interno della colonna.

Esistono quattro opzioni principali, tra cui Start, che allinea gli articoli all'inizio, al centro, alla fine e all'allungamento, che si estende per riempire lo spazio completo disponibile lungo l'asse incrociato del contenitore. Un elemento con un'altezza o una larghezza specifica assegnata sovrascriverà il tratto.

Avvolgimento del layout

Nelle impostazioni di Flexbox di Divi 5, l'avvolgimento di layout (proprietà CSS Flex-Wrap) determina cosa succede quando gli oggetti flessibili all'interno di un contenitore Flex si esauriscono lo spazio per avvolgere sulla riga successiva quando lo spazio si fa stretta. Esistono tre opzioni in Divi 5, tra cui nessuna avvolgimento, avvolgimento e avvolgimento.

Nessun involucro è l'impostazione predefinita, che dice al contenitore Flex di provare a montare tutti gli elementi Flex su una singola riga o colonna, indipendentemente dallo spazio disponibile. Se gli articoli sono troppo larghi per adattarsi, traboccheranno il contenitore (estende oltre i confini) o si restringeranno per adattarsi. Avvolgimento consente agli elementi di avvolgere su una nuova linea o colonna se superano lo spazio assegnato sulla riga. Avvolgimento inverso funziona in modo simile per avvolgere, ma lo fanno nella direzione opposta quando si avvolge alla riga successiva.

Flex Controls a livello del modulo

Oltre ad avere controlli Flexbox nella sezione, nella riga e nei livelli di colonna, Divi 5 offre anche un controllo preciso sui singoli moduli Divi. Ad esempio, quando si utilizza un modulo di gruppo, è possibile regolare la spaziatura (GAP), la direzione del layout e tutte le altre impostazioni Flexbox di Divi 5.

Vantaggi di Flexbox

Flexbox in Divi 5 non è solo un aggiornamento tecnico. Fornisce un modo migliore per costruire siti Web moderni e reattivi in ​​modo più semplice ed efficiente. Integrando Flexbox nel Visual Builder, Divi 5 consente agli utenti di tutti i livelli di abilità di sfruttare il potere del CSS senza scrivere codice. Ecco alcuni motivi per cui Flexbox è un aggiornamento di grande impatto da Divi 4:

Controllo intuitivo del layout senza codice

Divi 5 integra le impostazioni di Flexbox direttamente nel Visual Builder, permettendo di regolare l'allineamento, la spaziatura e l'ordinamento con opzioni semplici. Sia che tu stia creando altezze di colonna uguali o contenuti centrati in verticale, Flexbox semplifica i layout complessi.

Design reattivo migliore

Il sistema di layout Flexbox di Divi 5 rende il design reattivo un gioco da ragazzi, grazie ai controlli di layout personalizzabili per desktop, tablet e smartphone. L'opzione della struttura della colonna di cambiamento di Divi consente di modificare il numero di colonne su tablet e smartphone, lasciando intatto la struttura della colonna del layout sui desktop.

Flexbox + righe nidificate

La combinazione di righe nidificate e Flexbox in Divi 5 consente di creare facilmente layout complessi e multilivello. Ad esempio, è possibile creare una riga con colonne contenenti la propria riga, consentendo progetti sofisticati come griglie o sezioni di contenuto a livello.

Gruppi di moduli Flexbox +

I gruppi di moduli in Divi 5 agiscono come contenitori flessibili, che consente di modellare i moduli di gruppo e posizionare come unità coesa. Ciò semplifica la creazione di sezioni dinamiche, come caselle di funzionalità o schede di testimonianze, che si adattano automaticamente alle modifiche al contenuto mantenendo una spaziatura e l'allineamento coerenti.

Performance e semplicità migliorate

Sostituendo le sezioni di specialità e larghezza completa di Divi 4 con un sistema unificato basato su Flexbox, Divi 5 semplifica il processo di progettazione, riducendo la complessità e migliorando le prestazioni. Ciò significa tempi di caricamento più rapidi e un'esperienza di editing più fluida, in particolare per siti Web di grandi o pesanti contenuti.

Modelli di Flexbox predefiniti per avviamenti rapidi

Divi 5 introduce nuovi modelli di riga che sfruttano Flexbox per fornire layout predefiniti e flessibili come colonne uguali, colonne offset, griglie multi-file e griglie multicoluniche. Questi modelli ispirano la creatività, permettendoti di saltare i progetti con strutture completamente personalizzabili tramite impostazioni Flexbox.

Flusso di lavoro di progettazione a prova di futuro

Mentre Divi 5 continua a evolversi nella sua fase alfa pubblica, il suo sistema di layout Flexbox posiziona gli utenti Divi in ​​prima linea nel moderno web design. Padroneggiando Flexbox ora, ti stai dotando delle competenze che si allineano con gli standard del settore, garantendo che i tuoi siti Web rimangano adattabili agli aggiornamenti futuri.

Sblocca il potenziale creativo con Flexbox in Divi 5

Flexbox in Divi 5 cambia il modo in cui gli utenti costruiscono layout reattivi e dinamici. Divi 5 consente agli utenti di creare siti Web moderni e moderni senza scrivere codice integrando perfettamente potenti proprietà CSS Flexbox nel Visual Builder. Dall'allineamento intuitivo e controlli di spaziatura a caratteristiche avanzate come righe nidificate e gruppi di moduli, il sistema di layout Flexbox semplifica i progetti complessi garantendo layout perfettamente reattivi che sembrano grandi su tutti i dispositivi.