Înțelegerea fiecărui setare FlexBox din Divi 5

FlexBox și Divi 5 sunt un duo puternic care permite utilizatorilor DIVI să creeze machete uimitoare și receptive. În această postare, vom oferi ghidul final pentru înțelegerea și utilizarea fiecărei setări FlexBox pentru a crea cu ușurință machete flexibile, receptive.

FlexBox se află în centrul constructorului vizual reînnoit al Divi 5, permițând utilizatorilor să construiască modele uimitoare cu un control de neegalat. Sistemul FlexBox de la Divi 5 face ca machete complexe să fie o adiere, de la alinierea conținutului la construirea rețelelor dinamice.

Să ne scufundăm.

Ce este FlexBox?

FlexBox este un model CSS Layout conceput pentru a facilita aranjarea, alinierea și distribuirea elementelor într -un container, chiar și atunci când dimensiunile lor sunt dinamice. Spre deosebire de aspectul tradițional CSS care se bazează pe plute sau pe poziționare, FlexBox oferă o modalitate intuitivă de a construi modele flexibile și receptive, ceea ce îl face o piatră de temelie a dezvoltării web moderne.

Abonați -vă la canalul nostru YouTube

Conceptele cheie ale FlexBox

FlexBox funcționează în jurul mai multor concepte fundamentale:

• Container flex: elementul părinte care are afișare: flex sau inline-flex aplicat, stabilind conținutul flex. Acest container dictează modul în care copiii săi se comportă în aspect.
• Flex Elemente: Copiii direcți ai containerului Flex, care sunt aranjate și aliniate în funcție de proprietățile Flex ale containerului.
• Axa principală și axa încrucișată: Flexbox funcționează de -a lungul unei axe principală (fie orizontală ca rând, fie verticală ca coloană) și o axă încrucișată perpendiculară. Direcția axei principale se poate adapta la diferite moduri, cum ar fi de la stânga la dreapta la stânga, oferind flexibilitate pentru proiectele globale.

FlexBox în Divi 5: O nouă eră

Sistemul de aspect FlexBox al Divi 5 este încorporat în constructorul vizual, permițând utilizatorilor DIVI să creeze machete receptive cu controale intuitive. Aceste setări sunt aplicate în principal la secțiuni, rânduri, coloane și grupuri de module, permițându -vă să manipulați comportamentul de dispunere vizual fără a scrie CSS. FlexBox face ușor alinierea, reordoarea și transformarea cu ușurință a elementelor.

Accesarea FlexBox în Divi 5

Accesarea FlexBox în Divi 5 este simplă și intuitivă. Deschideți constructorul vizual, adăugați un rând nou și mergeți la fila Design. Veți găsi setări FlexBox sub dropdown -ul Layout.

Aceste setări sunt aplicate la nivelul containerului flex (secțiuni, rânduri etc.), controlând comportamentul elementelor flexibile. Interfața Divi afișează setările prin opțiuni ușor de utilizat, făcând FlexBox ușor pentru utilizatorii tuturor nivelurilor de abilitate.

Să parcurgem fiecare setare, astfel încât să puteți înțelege mai bine cum funcționează și cum să le folosiți pentru a construi machete.

Defalcarea detaliată a setărilor FlexBox în Divi 5

Mai jos este un ghid pentru fiecare setare legată de flexbox în Divi 5. Fiecare setare include scopul său, opțiunile disponibile și cazurile de utilizare practică pentru a vă ajuta să le aplicați eficient.

Stil de aspect

Flex este opțiunea implicită din meniul derulant Stil de layout. Când setați un recipient pentru a flexa, acesta devine un recipient flex. Elementele sale directe pentru copii (elemente flexibile) pot fi apoi aliniate flexibil folosind proprietățile CSS FlexBox.

Pe de altă parte, Block este modul tradițional în care Divi a gestionat machete în trecut. Elementele dintr-un recipient bloc sunt tratate ca elemente la nivel de bloc. Acest lucru înseamnă că, în general, se stivuiesc vertical, preluând lățimea completă disponibilă a containerului părinte.

Decalaj orizontal și vertical

În setările FlexBox Divi 5, controalele orizontale și verticale ale golului funcționează ca proprietate CSS Gap. Acestea oferă o modalitate eficientă de a adăuga o distanță constantă între elementele copilului într -un recipient.

Diferența orizontală definește spațiul dintre elementele flexibile atunci când sunt aranjate orizontal. În exemplul de mai jos, decalajul orizontal creează spațiul gol dintre fiecare coloană, dar nu și pe marginile exterioare ale recipientului flex. În mod implicit, % este selectat, dar puteți utiliza oricare dintre proprietățile CSS ale Divi 5 aici.

Vertical Gap definește spațiul dintre rândurile de articole. Acest lucru devine incredibil de important atunci când activați înfășurarea aspectului (mai multe despre asta mai târziu). De asemenea, se aplică atunci când direcția de dispunere este setată pe coloană sau coloană inversă .

Direcția de dispunere

Opțiunea de direcție de aspect în Divi 5 (proprietatea flex-direcție în CSS) este una dintre cele mai fundamentale controale. Determină axa primară de -a lungul căreia vor fi aranjate elementele copilului din recipient.

Gândiți -vă la el ca la configurarea fluxului de conținut. Există patru opțiuni principale: Rând, revers, coloană și coloană inversă. Rândul este cel mai frecvent cadru. Articolele Flex se vor aranja pe orizontală, de la stânga la dreapta. Este ideal pentru crearea de machete tradiționale de coloane orizontale, meniuri de navigare, elemente cot la cot sau de fiecare dată când doriți ca articolele să curgă pe pagină.

Cu rândul invers , elementele încă aranjează orizontal, dar în direcția opusă.

Când selectați coloana , elementele se vor aranja vertical, de sus în jos. Aceasta este o opțiune bună pentru stivuirea modulelor într -o singură coloană, crearea listelor verticale de conținut sau a unor machete de construire în care elementele trebuie să curgă în jos.

Coloana inversă funcționează la fel ca coloana, stivuind elementele într -un container vertical, dar în sens invers.

Justifică conținutul

Opțiunea Divi 5 Justify Conținut (proprietatea Justify-Content din CSS) controlează alinierea articolelor Flex de-a lungul axei principale a containerului Flex.

Opțiunile includ Start (Flex-Start în CSS), care aliniază elementele la începutul axei principale. Centrul aliniază articolele la mijlocul accesului principal. Când utilizațidirecția aspectului> rând, elementele se vor centra pe orizontală. Dacă utilizațidirecția aspectului> coloana, elementele se vor centra vertical.ENDaliniază elementele la sfârșit (fie la dreapta, fie la jos, în funcție de selecția de rând sau de coloană).

Folosițispațiu întrea distribui uniform elementele de -a lungul axei principale. Primul articol se aliniază cu START, în timp ce ultimul se aliniază la sfârșitul containerului. Spațiul din jur distribuie articole uniform de -a lungul axei principale, cu spațiu egal în jurul fiecărui articol. În cele din urmă, spațiul distribuie uniform elemente în care distanța dintre oricare două elemente adiacente și spațiul înainte de primul și după ultimul articol este aceeași.

Aliniați articolele

Opțiunilede aliniere elemente(proprietatea CSS ALIGN-Items) din setările FlexBox DivI 5 controlează modul în care elementele Flex se aliniază de-a lungul axei transversale a containerului Flex. Această opțiune diferă de Conținutul Justificați, care aliniază elementele de -a lungul axei principale.

Când setațidirecția de dispunerelarândulsaurândul invers, axa transversală devine verticală. Aceasta permitealinierea elementelorpentru a controla alinierea verticală a elementelor din rând. Dacă setațidirecția de dispunerepecoloanăsaucoloană inversă, axa încrucișată este orizontală. Prin urmare, elementele aliniate vor controla alinierea orizontală a elementelor din coloană.

Există patru opțiuni principale, inclusiv Start, care aliniază articolele la început, centru, capăt și întindere, care întinde articole pentru a umple spațiul complet disponibil de-a lungul axei transversale a containerului. Un element cu o înălțime sau o lățime specifică atribuită va trece peste întindere.

Înfășurarea aspectului

În setările FlexBox din Divi 5, înfășurarea layout (proprietatea CSS Flex-Wrap) determină ce se întâmplă atunci când elementele flexive din interiorul unui container flex se scurg din spațiu pentru a se înfășura pe următoarea linie atunci când spațiul devine strâns. Există trei opțiuni în Divi 5, inclusiv fără înveliș, înveliș și înveliș.

Nici o înfășurare nu este setarea implicită, care spune containerului Flex să încerce să se potrivească tuturor articolelor Flex pe o singură linie sau coloană, indiferent de spațiul disponibil. Dacă articolele sunt prea largi pentru a se potrivi, acestea vor revărsa containerul (se vor extinde dincolo de granițe) sau se vor micsora pentru a se potrivi. Învelișul permite elementelor să se înfășoare pe o nouă linie sau coloană dacă depășesc spațiul alocat pe rând. Wrap Reverse funcționează similar cu Wrap, dar o fac în direcția opusă când se înfășoară la următoarea linie.

Controluri Flex la nivelul modulului

Pe lângă faptul că are controale FlexBox la nivelurile de secțiune, rând și coloană, DIVI 5 vă oferă, de asemenea, un control precis asupra modulelor DIVI individuale. De exemplu, atunci când utilizați un modul de grup, puteți ajusta distanțarea (GAP), direcția de dispunere și toate setările FlexBox din Divi 5.

Avantajele FlexBox

FlexBox în Divi 5 nu este doar un upgrade tehnic. Oferă o modalitate mai bună de a construi site -uri moderne, sensibile, mai ușor și mai eficient. Prin integrarea FlexBox în constructorul Visual, Divi 5 permite utilizatorilor de toate nivelurile de abilități să valorifice puterea CSS fără a scrie cod. Iată câteva motive pentru care FlexBox este o actualizare atât de impactantă de la Divi 4:

Control intuitiv de aspect fără cod

Divi 5 integrează setările FlexBox direct în constructorul vizual, permițându -vă să ajustați alinierea, distanțarea și comanda cu opțiuni simple. Indiferent dacă creați înălțimi egale de coloană sau conținut de centrare pe verticală, FlexBox face ușoară machete complexe.

Un design mai bun receptiv

Sistemul de aspect FlexBox al Divi 5 face ca designul receptiv să fie o adiere, datorită comenzilor de aspect personalizabile pentru desktop, tablete și smartphone -uri. Opțiunea de structură a coloanelor de schimbare a Divi vă permite să schimbați numărul de coloane pe tablete și smartphone -uri, lăsând în același timp structura coloanei de layout intactă pe desktop.

Flexbox + rânduri cuibărite

Combinarea rândurilor cuibărite și Flexbox în Divi 5 vă permite să construiți cu ușurință machete complexe, pe mai multe niveluri. De exemplu, puteți crea un rând cu coloane care conțin propriul rând, permițând modele sofisticate precum grile sau secțiuni de conținut stratificat.

FlexBox + Grupuri de module

Grupurile de module din Divi 5 acționează ca containere flexibile, permițându -vă să stilați și să poziționați modulele grupului ca unitate de coeziune. Acest lucru face simplu să creeze secțiuni dinamice, cum ar fi cutii de caracteristici sau carduri mărturisite, care se adaptează automat la modificările de conținut, menținând în același timp distanțarea și alinierea constantă.

Performanță îmbunătățită și simplitate

Prin înlocuirea secțiunilor de specialitate și de lățime completă a Divi 4 cu un sistem unificat bazat pe FlexBox, DIVI 5 simplifică procesul de proiectare, reducând complexitatea și îmbunătățind performanța. Aceasta înseamnă timp de încărcare mai rapid și o experiență de editare mai ușoară, în special pentru site-urile mari sau cu conținut.

Șabloane pre -construite FlexBox pentru porniri rapide

Divi 5 introduce noi șabloane de rând care folosesc FlexBox pentru a oferi machete predefinite, flexibile, precum coloane egale, coloane de compensare, grile cu mai multe rânduri și grile cu mai multe coloane. Aceste șabloane inspiră creativitatea, permițându -vă să săriți proiecte cu structuri complet personalizabile prin setările FlexBox.

Flux de lucru de design rezistent la viitor

Pe măsură ce Divi 5 continuă să evolueze în faza sa publică alfa, sistemul său de aspect FlexBox poziționează utilizatorii Divi în fruntea designului web modern. Stăpânind acum FlexBox, vă echipați cu abilitățile care se aliniază standardelor din industrie, asigurându -vă că site -urile dvs. rămân adaptabile la actualizările viitoare.

Deblocați potențialul creativ cu FlexBox în Divi 5

FlexBox în Divi 5 schimbă modul în care utilizatorii construiesc machete dinamice sensibile. Divi 5 permite utilizatorilor să creeze site -uri web uimitoare și moderne, fără a scrie cod prin integrarea perfectă a proprietăților puternice CSS FlexBox în constructorul vizual. De la controale intuitive de aliniere și distanțare până la caracteristici avansate, cum ar fi rândurile cuibărite și grupurile de module, sistemul FlexBox Layout simplifică modele complexe, asigurând în același timp machete perfect responsive, care arată excelent pe toate dispozitivele.