Una guida per principianti a Flexbox CSS Properties

Il buon layout inizia con un modello chiaro per l'allineamento e la spaziatura. Flexbox fornisce quel modello organizzando il contenuto lungo un singolo asse con controllo prevedibile su direzione, allineamento, avvolgimento e gap.

Questo post copre le basi di queste proprietà CSS e di come lavorano insieme. Dopo i fondamentali, mostriamo come lo stesso approccio viene implementato visivamente in Divi 5 utilizzando il sistema di layout Flexbox. Ci arriviamo!

Cos'è CSS Flexbox?

Design del traffico mobile Design ha modificato il web design. Gli sviluppatori avevano bisogno di layout che funzionassero su telefoni, tablet e desktop. Vecchi metodi spesso fallirono.

Flexbox ha risolto questo. CSS Flexbox fa adattare gli elementi. Aggiungi il display: flettere a un contenitore e i suoi bambini diretti diventano flessibili. Possono crescere, restringere o rimanere fissi in base allo spazio.

Flexbox pone gli elementi in linea retta, righe da sinistra a destra o colonne in alto. Scegli la direzione.

Il contenitore controlla il layout. Hai impostato il modo in cui gli oggetti si allineano e lo spazio, come diffuso in modo uniforme, centrato o impilato. La proprietà Gap aggiunge spazio coerente tra oggetti senza margini o imbottitura extra. Le tecniche più vecchie richiedevano matematica margine complicate e si spezzavano spesso.

Il metodo tradizionale fa scelte di spaziatura casuali: 10px qui, 20px lì, 40px da qualche altra parte. Questi valori sparsi causano incoerenze e rendono difficile sapere quale spaziatura si applica. Le proprietà gap rimuovono le congetture usando una regola coerente per tutti gli elementi.

Una rapida guida a Flexbox e alle sue proprietà

Flexbox si divide in due campi: proprietà per contenitori e proprietà per gli articoli. Le proprietà del contenitore influenzano l'intero gruppo, mentre le proprietà degli articoli consentono di modificare singoli elementi. La maggior parte dei layout necessita solo di una manciata di queste proprietà, come:

Visualizza: Flex

Trasforma qualsiasi elemento in un contenitore Flex aggiungendo il display: Flex. I suoi bambini diretti diventano oggetti flessibili. Gli elementi si allineano in una fila per impostazione predefinita anziché impilamento come elementi di blocco standard. I tuoi mal di testa spaziali scompaiono perché gli oggetti flessibili seguono regole diverse rispetto agli elementi regolari. Il contenitore ora controlla come i suoi figli (o oggetti) si comportano e ottieni risultati prevedibili invece delle solite sorprese CSS.

Direzione flessibile

Scegli in quale direzione fluire gli elementi. Usa una riga per la disposizione da sinistra a destra.

e una colonna per impilare gli elementi verticalmente.

Aggiungi il contrario a uno dei due e gli elementi capovolgano completamente il loro ordine.

Questa scelta imposta l'asse centrale, che influisce su come funzionano altre proprietà.

Il passaggio da riga a colonna cambia come si comportano giustificare contenti e allineare, quindi la direzione arriva per primo nella tua pianificazione.

giustificare il contenuto

Questa proprietà distribuisce spazio rimanente lungo l'asse centrale. Gli articoli prendono ciò di cui hanno bisogno, quindi questa proprietà gestisce il resto. Usa Flex-Start per raggruppare tutto all'inizio, centrare gli oggetti raggruppati nel mezzo e Flex-End per mettere tutto verso la fine. Allo stesso tempo, lo spazio intermedio viene utilizzato per distribuire oggetti a parte con lacune uguali. Il valore dello spazio dà a ciascun elemento uguale spazio su entrambi i lati, mentre lo spazio crea uniformemente di spazi identici ovunque.

allineare

Gestisce l'allineamento sull'asse incrociato. Per i layout orizzontali, questo significa allineamento verticale. Per i layout verticali, controlla il posizionamento orizzontale. Supporta valori come Flex-Start, Center, Flex-End, Stretch e Baseline (non i valori spaziali*). Mettilo al centro e gli oggetti si allineano al centro indipendentemente dalle loro altezze. Il valore predefinito è allungato: gli elementi si estendono per riempire la dimensione incrociata del contenitore. Se la dimensione incrociata del contenitore è automatica, spesso è uguale all'articolo più alto in modo che gli elementi appaiano uguali in altezza.

Flex-wrap

Decide cosa succede quando gli articoli si esauriscono. Il NowRap predefinito mantiene tutto su una riga riducendo gli oggetti. Passa a avvolgimento e oggetti che non si adattano a nuove linee mantenendo le loro dimensioni preferite. Puoi anche invertire la direzione di avvolgimento. La confezione trasforma la tua singola riga in più righe, creando layout che assomigliano a griglie.

spacco

Aggiunge spazio tra gli oggetti senza scherzare con i margini. Imposta Gap: 20px e ogni elemento ottiene una spaziatura costante. È possibile impostare diversi lacune orizzontali e verticali se necessario. Lo spazio appare solo tra gli oggetti, non attorno ai bordi. Questo batte i margini di calcolo che si rompono quando si cambia layout in seguito.

Queste proprietà funzionano bene una volta che hai capito. La parte difficile è ricordare cosa fa ognuno e scrivere tutto ciò che CSS. Scrivi un po 'di codice, aggiorna il browser, vedi che non è del tutto giusto, quindi torna indietro e regola. I costruttori visivi come Divi Flip questo in giro permettendoti di fare clic sui pulsanti invece di digitare i nomi delle proprietà.

Divi 5 rende Visual Flexbox

Come abbiamo stabilito, l'apprendimento di Flexbox è una cosa; Ricordare ciò che giustifica il contenuto: lo spazio-spazio fa è un altro. Trascorri più tempo a digitare proprietà rispetto alla progettazione. Invece di scrivere CSS, usi pulsanti e cursori che mostrano esattamente cosa fa ogni opzione nel Builder Divi. Divi 5 porta questo a Flexbox, trasformando concetti astratti in controlli semplici e cliccabili.

Prima di immergerci più a fondo, guardiamo brevemente cosa è Divi.

Cos'è Divi?

Divi è un costruttore di siti Web che fa funzionare WordPress per le persone che desiderano siti di bell'aspetto senza la seccatura.

Puoi trascinare tutti i 200+ moduli attorno alla tua pagina e cambiare il testo in cui si trova. Scegli i colori e guardali apparire all'istante mentre lavori sul sito reale, non alcune anteprima che potrebbero mentirti in seguito.

Il tema include oltre 2000 layout per ristoranti, fotografi, consulenti e altre aziende, in modo da poterlo trovare uno che ti piace e modificarlo fino a quando non funziona perfettamente per le tue esigenze.

Il tema costruttore ti dà il controllo su ogni parte del tuo sito. Puoi progettare intestazioni che si distinguono invece di assomigliare a tutti gli altri, costruire pagine del blog che le persone vogliono leggere e persino rendere le tue 404 pagine abbastanza interessanti che i visitatori si attaccano invece di andarsene.

Divi Ai ti aiuta a costruire velocemente

Una volta, fare temi e modelli significava destreggiarsi tra diverse app per copia, immagini e idee di progettazione. Divi Ai raccoglie tutto ciò di cui hai bisogno in un'unica interfaccia unificata: proprio dove costruisci i tuoi siti Web.

Dillo che hai bisogno di testo e lo scrive.

Chiedi immagini personalizzate e le crea. Puoi anche descrivere le modifiche fotografiche e guardarle apportare le modifiche.

Inoltre, gestisce il codice e crea nuove sezioni quando lo chiedi.

Divi Quick Sites ti salva dal fissare una pagina vuota senza sapere da dove cominciare. Puoi scegliere dai siti di avviamento progettato dal nostro team, con immagini originali e opere d'arte che sembrano buone.

Puoi anche descrivere la tua attività per divini di siti rapidi e lasciarlo costruire qualcosa da zero usando l'IA. Questi siti costruiti dall'intelligenza artificiale sono dotati di titoli reali, copie e immagini che corrispondono alla tua descrizione.

Genera tutto con l'intelligenza artificiale, prendi le foto di Unsplash o lascia cadere i segnaposto per le tue immagini. Imposta prima i tuoi caratteri e colori, quindi lascia che l'IA funzioni attorno alle scelte del tuo marchio mantenendo tutto modificabile in seguito.

Divi 5: il costruttore di siti Web a prova di futuro

Divi 5 ricostruisce l'intero quadro da zero.

Visual Builder esegue più a fiordo, le pagine rendono più velocemente e la base di codice può supportare in modo più efficace gli standard Web moderni. Ottieni markup più pulito, prestazioni migliori e una fondazione pronta per il presente e il futuro.

Anche l'interfaccia viene semplificata. Le impostazioni appaiono più logicamente organizzate e le attività quotidiane richiedono meno clic. L'esperienza complessiva sembra più reattiva, non importa se stai costruendo pagine semplici o layout complessi.

Ottieni lo stesso approccio di costruzione visiva che conosci, solo con una base molto più forte sotto.

Cosa c'è di nuovo in Divi 5

La nuova architettura apre le porte per le caratteristiche che prima non erano possibili. Queste oltre 18 aggiunte cambiano il modo in cui crei e gestisci siti Web.

Ecco un esempio di ciò che ottieni:

• Sistema di layout Flexbox: controlli visivi per allineamento, spaziatura e posizionamento. Gli elementi possono crescere, restringersi o avvolgere automaticamente su nuove linee. Funziona con righe nidificate e gruppi di moduli per layout complessi senza codice.
• Righe nidificate: metti le file all'interno di altre file con nidificazione infinita. Costruisci strutture di layout complesse senza soluzioni alternative di codice.
• 17 Moduli WooCommerce: costruttori di pagine del prodotto complete tra cui la galleria di prodotti, aggiungi a carrello, recensioni, valutazioni, comunicazioni di scorta, pangrattato, meta, upsells e altro ancora. Moduli carrelli e checkout in arrivo.
• Sistema di interazioni: creare pop-up, interruttori, animazioni di scorrimento, effetti di movimento del mouse e trigger di viewport. Mescola più grilletti per comportamenti complessi come banner promozionali che svaniscono dopo lo scorrimento.
• Editor reattivo: consente di visualizzare, modificare e ripristinare gli stati di bordo e appiccicio reattivo per qualsiasi impostazione contemporaneamente senza cambiare le modalità di visualizzazione per una modifica più veloce, più precisa e meno disordinata.>
• Loop Builder: crea contenuti dinamici che tirano dal tuo database. Crea layout di post personalizzati, griglie del prodotto e sezioni ripetute. Funziona con i prodotti WooCommerce.
• Preset del gruppo di opzioni: creare stili riutilizzabili per tipografia, bordi, ombre e sfondi. Applicali su qualsiasi elemento compatibile, non solo singoli moduli.
• Variabili di progettazione: imposta valori globali per colori, caratteri, spaziatura, numeri, immagini e testo. Cambia il tuo colore principale una volta e aggiornerà automaticamente ovunque.
• UNITÀ CSS avanzate: Usa le funzioni di CLAMP (), CALC (), MIN () e MAX () attraverso i controlli visivi. Nessun codice richiesto per la tipografia reattiva e i calcoli di spaziatura.
• Colori relativi e HSL: creare sistemi di colore matematicamente belli. Costruisci variazioni di colore che mantengono automaticamente l'armonia quando il colore di base viene modificato.

E altri stanno arrivando! Il nostro team di sviluppo continua ad aggiungere funzionalità ~ ogni due settimane mentre si preparano per il rilascio beta pubblico.

Una rapida panoramica della configurazione Flexbox di Divi 5

L'approccio visivo di Divi 5 rimuove le congetture dall'implementazione di Flexbox. Invece di memorizzare i nomi delle proprietà e digitare CSS, ottieni pulsanti e cursori che mostrano esattamente cosa fa ogni controllo. Dai un'occhiata a quanto è facile.

1. Impostazione della tua prima riga flessibile

Inizia raccogliendo la struttura della tua riga dalla selezione del modello esteso. Divi 5 offre molte più opzioni di layout, tra cui colonne uguali, griglie multi-file e configurazioni multicoluniche.

Nuove sezioni in Divi 5 iniziano automaticamente con Flexbox. Quando aggiungi una nuova riga, viene pronta con le proprietà flessibili accese. Ma se stai lavorando con le sezioni esistenti dalle versioni Divi più vecchie, dovrai passare manualmente dal layout di blocco predefinito per flettere facendo clic sull'icona delle impostazioni sulla tua riga, navigando nella scheda Design> layout e cambiando "blocco" su "Flex".

2. Comprensione della direzione, flusso, allineamento

Il campo di direzione del layout determina dove gli elementi finiscono. La riga è l'impostazione predefinita, che rende gli elementi che si allineano in orizzontale.

Passa alla colonna e gli elementi impilano elementi in verticale come i normali layout web.

Entrambe le opzioni sono dotate di versioni inverse che capovolgono completamente l'ordine.

Nel frattempo, giustificare il contenuto decide cosa succede con lo spazio rimanente lungo l'asse principale. Per le righe, avvia significa sinistra, centri centrali in orizzontale e la fine si allinea a destra.

Per le colonne, avvia significa in alto, i centri centrali tutto e la fine spinge gli oggetti sul fondo.

Oltre all'allineamento standard di avvio, centro e fine, hai anche spazio tra gli articoli di diffusione con i lacune uguali, perfetti per i menu di navigazione o i layout delle carte.

Lo spazio intorno offre a ciascun oggetto uguale spazio respiratorio su entrambi i lati, il che è utile quando si desidera margini coerenti. E, lo spazio crea uniformemente lacune identiche ovunque, ideali per una spaziatura visiva equilibrata.

Allinea gli oggetti funziona perpendicolari alla direzione del flusso. Se si sceglie il layout della riga, questo controlla il posizionamento verticale degli elementi.

Se hai scelto il layout della colonna, gestisce l'allineamento orizzontale.

Il centro mantiene tutto allineato al centro, gli oggetti di avvio posiziona gli oggetti al bordo iniziale, l'estremità li spinge verso il bordo lontano e il tratto fa riempire lo spazio disponibile.

Questi controlli risolvono il mal di testa di layout comuni senza calcoli CSS personalizzati.

3. Spaziatura delle cose con i controlli di gap

I controlli di gap aggiungono spazio tra gli elementi flessibili nel contenitore: colonne, moduli e qualsiasi tipo di tipo di contenuto funzionano. Gaps Crea spazio per respirare senza imbottitura disordinata o matematica a margine. Il divario appare solo tra gli oggetti, non attorno ai bordi esterni.

Imposta il tuo divario orizzontale su 20px e ogni colonna avrà quella spaziatura esatta.

Cambia il divario verticale in 20px e tutte le lacune si aggiorneranno all'istante.

Divi 5 supporta unità CSS avanzate come lunghezze e percentuali di visualizzazione. È possibile utilizzare il clamp () per lacune reattive che si ridimensionano tra le dimensioni dello schermo. È anche supportata la funzione Calc (), che combina unità come Calc (2Rem + 10Px).

I controlli di gap qui supportano anche le variabili di progettazione. Aggiungi una variabile numerica chiamata "Gap della colonna orizzontale" con un morsetto (16px, 2vw, 32px) come valore. Applicare quella variabile ai controlli GAP sul tuo sito.

Quando si desidera una spaziatura più stretta in seguito, modifica la variabile; Ogni divario si aggiornerà immediatamente.

4. Controllo di come si avvolgono gli articoli

Layout Wrapping controlla cosa succede quando gli articoli si esauriscono lo spazio orizzontale. L'impostazione predefinita senza avvolgimento mantiene tutto su una riga riducendo gli oggetti per adattarsi al contenitore. Passa a avvolgimento e oggetti che non si adattano al calo di nuove linee mantenendo le loro dimensioni naturali.

Avvolgimento inverso fa la stessa cosa dell'avvolgimento normale, ma capovolge la direzione. Nuove righe appaiono sopra le precedenti anziché sotto.

Questo ti dà il controllo sulla gerarchia visiva quando gli oggetti traboccano. Il comportamento di avvolgimento rimane coerente tra diverse dimensioni dello schermo, quindi il layout si adatta prevedibilmente da desktop al cellulare senza rompere.

Divi 5 ti dà anche controlli di allineamento di avvolgimento. Questa funzione appare automaticamente quando si abilitano la confezione flessibile e le forme a più linee. Quando la direzione è impostata su rema, l'allineamento di avvolgimento è disponibile per l'allineamento verticale.

Allo stesso modo, per la direzione della colonna, le opzioni sono per l'allineamento orizzontale.

L'allungamento fa espandere tutte le linee per riempire lo spazio verticale disponibile. Inizia mazzi di linee all'inizio, i cluster centrali nel mezzo e termina spingendoli verso il bordo opposto.

Lo spazio tra le linee di diffusione a parte con spazi spazi uguali, lo spazio attorno a ciascuna linea di respiro uguale su entrambi i lati e lo spazio crea uniformemente spazi vuoti tra tutte le linee.

Funziona alla grande per layout delle schede, gallerie di immagini o qualsiasi contenuto che deve fluire naturalmente su più righe. Gli articoli mantengono le loro proporzioni e spaziature mentre si riorganizzano in base alla larghezza disponibile. Ottieni pause pulite senza oggetti che vengono schiacciati su piccoli schermi.

5. Lavorare su diverse dimensioni dello schermo

I sette punti di interruzione di Divi 5 ti danno il controllo granulare su come si adattano i tuoi layout.

Ogni Breakpoint funziona in modo indipendente, in modo da poter cambiare la direzione del layout in colonna sul cellulare mentre il layout della riga desktop rimane intatta. Potresti centrare tutto sui telefoni, ma mantenere quello spazio tra l'allineamento su schermi più grandi.

La tua configurazione a tre colonne desktop può diventare uno stack a singola colonna sul cellulare senza influire sui punti di interruzione medi. Ogni dimensione dello schermo ottiene esattamente ciò che funziona meglio per quell'esperienza di visualizzazione.

Il nuovo editor reattivo rende questo processo molto più fluido. Fare clic sull'icona reattiva dell'editor accanto a qualsiasi impostazione per visualizzare e modificare i valori per tutte le dimensioni dello schermo contemporaneamente.

Tuttavia, se si utilizzano i valori di Clamp () per interrompere le righe e le colonne, ciò ridimensionerebbe automaticamente tra i punti di interruzione senza richiedere modifiche manuali.

6. Creazione di preset di gruppi di opzioni

Dopo aver fatto funzionare il layout Flexbox nel modo in cui lo desideri, puoi salvare quelle impostazioni come preimpostazione del gruppo di opzioni facendo clic sull'opzione del gruppo di opzioni e etichettandolo in modo appropriato.

I valori di gap, le scelte di allineamento e le impostazioni avvolgenti sono in bundle insieme. Quando si fa clic su Salva, quella configurazione esatta di layout diventa riutilizzabile sul tuo sito. Quando si desidera utilizzare il preimpostazione salvata, fai clic sull'icona preimpostata nella nuova riga e seleziona il preset appena salvato.

Il preimpostazione mantiene intatti le tue unità avanzate. I tuoi trasferimenti di spaziatura reattivi con tutti i matematici che hai impostato e le modifiche sono state persino apportate su diversi punti di interruzione.

Inizia oggi con Flexbox di Divi 5

Flexbox elimina il margine e imbottitura matematica che si rompe quando si cambiano layout. Smetti di armeggiare con un design reattivo con query multimediali e sezioni personalizzate.

Divi 5 trasforma queste proprietà CSS astratte in controlli visivi. È possibile fare clic sui pulsanti per impostare la direzione, trascinare i cursori per regolare gli spazi vuoti e disattivare e spegnere. L'editor reattivo gestisce tutti e sette i punti di interruzione da un pannello, quindi vedi i risultati istantaneamente invece di indovinare il codice.

Salva combinazioni di successo come preset e riutilizzarle ovunque. Trascorri del tempo a progettare invece di debug di sintassi CSS.