Ce este FlexBox (și de ce ar trebui să -l utilizați)

Puteți construi secțiuni curate toată ziua, dar alinierea elementelor pe fiecare dimensiune a ecranului poate începe să se simtă mai mult ca încercare și eroare decât proiectarea intenționată.

FlexBox fixează asta. Vă oferă un control real asupra modului în care elementele stau, se întind, se micșorează și se înfășoară în interiorul unui recipient, fără a regla constant marjele și căptușeala. În acest ghid, vom descompune modul în care funcționează FlexBox, cum simplifică machetele și cum să -l utilizăm vizual în Divi 5 fără a scrie o singură linie de cod.

Ce este FlexBox

FlexBox, scurt pentru aspectul cutiei flexibile , este un model de aspect care simplifică modul în care elementele se aliniază și se spaționează în interiorul unui recipient. În loc să poziționeze fiecare articol folosind marje sau lățimi fixe, FlexBox vă permite să definiți modul în care aceste elemente ar trebui să se comporte în funcție de spațiul disponibil.

Ar trebui ca elementele să crească pentru a umple camera suplimentară? Micșorați -vă când spațiul este strâns? Ar trebui să se înfășoare la următoarea linie atunci când nu se mai potrivesc? Faceți aceste opțiuni printr -un set de proprietăți pe care le aplicați containerului și copiilor săi. Așa decideți cum ar trebui să răspundă aspectul dvs.

Să luăm exemple practice pentru a înțelege acest lucru. Spuneți că aveți trei butoane în interiorul unui rând orizontal. Cu FlexBox, le puteți concentra pe toate uniform în interiorul containerului:

Decideți că butonul din mijloc ar trebui să ocupe mai mult spațiu decât ceilalți:

Sau poate doriți ca butoanele să se stivuiască automat atunci când ecranul devine mai restrâns:

FlexBox face toate acestea posibile cu proprietăți simple, cum ar fi justific-content, flex-wrap și flex-crește.

În plus, vă permite să controlați modul în care elementele sunt distanțate, aliniate pe diferite axe și ordonate vizual, fără a -și schimba poziția reală în constructor. Puteți centra conținutul, îl puteți împinge în partea de sus sau de jos a containerului, puteți alinia un element diferit de restul sau chiar inversați întreaga ordine pe punctele de întrerupere.

S -ar putea să vă gândiți: nu pot face deja asta cu marje și căptușeala?

Ai dreptate. Puteți centra elementele manual sau puteți regla dimensiunea lor cu lățimi personalizate. Cu toate acestea, aceste metode se bazează pe poziționarea fiecărui articol individual. Reglați fiecare element pe rând, pentru fiecare dimensiune a ecranului.

FlexBox schimbă acest proces în întregime. În loc să tratați fiecare element separat, vă permite să definiți regulile de dispunere la nivelul containerului o dată. Spuneți containerului cum ar trebui să se comporte copiii săi în diferite scenarii și îi ajustează după cum este necesar.

Această abordare face ca machetele să fie mai consistente, mai ușor de gestionat și mai flexibile pe măsură ce proiectele evoluează, mai ales atunci când se adaugă dimensiunile ecranului sau sunt adăugate noi module.

Cum afectează alinierea direcției flexibile

Una dintre primele opțiuni pe care le faceți în FlexBox este direcția în care elementele ar trebui să curgă, fie într -un rând, fie într -o coloană. Proprietatea flex-direcție stabilește acest lucru și definește modul în care elementele se aliniază, înfășoară și se spaționează în interiorul containerului.

Să înțelegem acest lucru mai bine, deoarece proprietățile comune precum Justify-content și Alinierea-conținut depind în întregime de direcția setată. Acestea nu funcționează pe aspectul implicit al browserului, ci axele create de FlexBox: axa principală și axa încrucișată . Axa principală urmărește direcția pe care o setați cu flex-direcție: orizontală pentru rânduri, verticală pentru coloane. Axa încrucișată merge invers: verticală pentru rânduri, orizontală pentru coloane.

Deci, axa principală rulează de la stânga la dreapta când direcția este setată pe rând. Aceasta înseamnă că justificarea elementelor de mișcare a conținutului de-a lungul rândului, iar alinierea-elemelor controlează modul în care acestea se aliniază vertical în acel rând.

Și când schimbați direcția la coloană, întreaga logică de aliniere se aruncă. Axa principală rulează acum de sus în jos, ceea ce înseamnă că justificarea-conținut aliniază elementele pe verticală, iar aliniem-urile își reglează poziția de la stânga la dreapta.

Se poate simți ușor confuz la început, dar odată ce vedeți cum răspund axele principale și încrucișate la direcție, acesta face clic. Veți începe să depistați modele, iar deciziile de aspect se vor simți mai intuitive. Există, de asemenea, un tabel de referință rapid mai jos, dacă doriți să verificați de două ori lucrurile în timp ce practicați.

Sintaxă și proprietăți comune FlexBox

Comutați proprietatea de afișare a unui container de la bloc la flex pentru a activa FlexBox. Când faceți acest lucru, browserul începe să trateze elemente interioare, cum ar fi rânduri, butoane, cărți sau pictograme ca elemente flexibile.

.container {
display: flex;
}

De acolo, utilizați diferite proprietăți FlexBox pentru a controla comportamentul. De exemplu, Justify-content decide modul în care elementele sunt distanțate de-a lungul axei principale (aceasta este setată pe orizontală în mod implicit, flex-direcție: rând) . Folosiți Flex-Start pentru a alinia articolele la stânga, Flex-End pentru a le împinge spre dreapta, centrul pentru a le centra, sau spațiul între ele și spațiul pentru a le răspândi uniform.

În mod implicit, FlexBox încearcă să se potrivească tuturor articolelor pe o singură linie. Dacă sunt prea mulți, se vor micsora pentru a se potrivi pe baza setărilor lor flex-shrink și, dacă nu se pot micșora suficient, pot revărsa containerul. Pentru a preveni acest lucru, porniți Flex-Wrap, astfel încât elementele să se deplaseze pe o nouă linie în loc să se înghesuie într-una.

Vă puteți gândi deja la multe cazuri de utilizare în care aceste două proprietăți pot rezolva probleme de aspect. Dar sunt multe altele și fiecare vă oferă un control specific asupra mărimii, comenzii, alinierii și distanțarea.

Dacă sunteți curios să vedeți cum funcționează de fapt într-un mod jucăuș, hands-on, încercați Flexbox Froggy. Este un mic joc distractiv în care aplicați cod real Flexbox pentru a muta broaștele în jurul unui iaz. Pe parcurs, încetați să ghiciți și începeți să recunoașteți exact ce face fiecare proprietate.

De ce să folosiți FlexBox

Până acum, ați văzut cum FlexBox schimbă modul în care aspectele răspund la spațiu. Dar valoarea reală provine din ceea ce această schimbare vă permite să faceți mai ușor. FlexBox transformă provocările de aspect încăpățânate în modele simple, reutilizabile.

• Alinierea simplificată: proprietăți precum justificarea conținutului și alinierea elementelor din centru sau spațiu fără a se baza pe modificări ale marjei sau clase de ajutor.
• Răspunzând în mod implicit: elementele cresc în mod natural, micșorează sau se înfășoară în funcție de spațiul lor. Acest lucru duce la machete mai curate care se adaptează fără puncte de întrerupere adăugate.
• Distanță automată și dimensionare: controlați modul în care elementele împărtășesc spațiul cu proprietăți precum Flex-Grow, Flex-Shrink și Flex-Basis, făcând aspectul de aspect în loc de fixat.
• Reordonarea fără a schimba HTML: Puteți schimba ordinea vizuală a elementelor fără a atinge HTML. Structura rămâne curată, în timp ce aspectul se ajustează pentru diferite ecrane.
• Mai puține hack-uri de layout: nu mai aveți nevoie de plutitoare, clapete sau scripturi care potrivesc înălțimea. FlexBox le înlocuiește pe cele cu opțiuni moderne, fiabile.

Și pentru că este acceptat pe toate browserele majore, FlexBox nu este doar eficient, ci și de încredere. Acest lucru îl face o alegere modernă, mai fiabilă, pentru proiectele din lumea reală.

De ce FlexBox este adesea mai bun decât grila

Grila este un alt sistem popular de aspect, cum ar fi FlexBox. Cu toate acestea, ambele sunt construite pentru cazuri de utilizare diferite.

Grid, de exemplu, este proiectată pentru machete bidimensionale, unde aveți nevoie de control atât pe rânduri, cât și pe coloane. Produsele de produse, galeriile de imagini și machete editoriale în stil reviste sunt exemple de grilă, deoarece se bazează pe o structură strâns aliniată pe ambele axe.

Începi prin definirea grilei: câte rânduri și coloane există și cât de larg sau înalt ar trebui să fie fiecare. Apoi plasați fiecare articol în acea structură.

Acesta este un aspect al grilei. Elementele sunt aliniate pe ambele axe: rânduri și coloane, cu distanțare fixă și proporții.

Dar nu orice aspect are nevoie de acel nivel de planificare.

De cele mai multe ori, secțiunile UI curg într -o singură direcție. Rândurile de carduri, blocuri de pictogramă-plus-text și legături de navigație urmează o axă, nu două. Exact acolo se potrivește FlexBox.

Într -un aspect FlexBox, cardurile sunt aliniate într -o direcție (rând sau coloană) și apoi înfășurate și distanțate pe baza regulilor containerului.

Nu trebuie să marcați în avans întregul aspect. Pur și simplu spuneți containerului cum ar trebui să se comporte articolele de -a lungul unei singure axe, iar FlexBox îl gestionează.

Deci, dacă nu proiectați ceva care depinde cu adevărat de o grilă rigidă, FlexBox va fi adesea o alegere mai rapidă, mai simplă și mai flexibilă.

FlexBox în Divi 5

Tot ceea ce am învățat până acum despre FlexBox este excelent, dar scrierea CSS personalizată pentru fiecare modificare de aspect nu este ceea ce doriți să faceți, mai ales dacă ați construit site -ul dvs. folosind un constructor vizual precum Divi.

De aceea, Divi 5 include acum controale încorporate FlexBox. Nu mai trebuie să schimbați filele sau să adăugați CSS manual. Toate acestea, și chiar comportamente avansate de aspect, sunt acum încorporate în constructorul vizual, minus codificarea și un backend copleșitor.

Abonați -vă la canalul nostru YouTube

Povestea lungă, nu este nevoie să vă amintiți numele de sintaxă sau de proprietăți, trebuie doar să selectați ceea ce doriți din interfață. Faceți clic pe orice secțiune, rând sau coloană, accesați fila Design și sub aspect> stil de aspect , asigurați -vă că utilizați Flex.

Aceasta deschide un nou set de controale de aspect. Acestea sunt proprietățile Core FlexBox pe care le scrieți de obicei în CSS, dar acum ca opțiuni de clic. Puteți testa schimbările în direct și puteți vedea cum reacționează conținutul dvs.

Așadar, chiar dacă nu ați scris niciodată o singură linie de cod FlexBox, nu veți pierde nimic. Divi 5 vă oferă același control de aspect vizual cu același nivel de control, dar mult mai multă ușurință.

Aflați totul despre sistemul FlexBox al Divi 5

Structuri de rând noi

De ce Divi când alți constructori web îl au și el? În timp ce mulți constructori web oferă FlexBox ca opțiune de aspect, Divi 5 o abordează diferit. Aceasta nu este o caracteristică stratificată pe un sistem existent; Acum este nucleul modului în care funcționează constructorul.

Întregul motor de aspect a fost reconstruit de la sol cu Flexbox la fundația sa. Drept urmare, comportamentul aspectului se simte mai consistent și mai previzibil, deoarece urmează o logică de aspect proiectată intenționat.

De exemplu, atunci când adăugați o nouă secțiune sau un rând în Divi 5, veți observa imediat ceva diferit. Noi structuri. Fiecare rulează acum pe FlexBox în mod implicit, ceea ce înseamnă că alinierea, distanțarea și receptivitatea sunt tratate mai inteligent de la început.

Nu va trebui să porniți Flex pentru noi elemente de design pe care le adăugați. Și atunci când o faceți, în timp ce editați un aspect mai vechi, instrumentele de aliniere și distanțare devin instantaneu mai ușor de gestionat.

De asemenea, puteți modifica modul în care coloanele sunt aranjate în interiorul unui rând folosind structura coloanelor de schimbare.

Aceasta deschide un panou unde puteți selecta o nouă structură de coloană. Aspectul se actualizează imediat, cu FlexBox reglând automat distanțarea și alinierea.

Încercați să adăugați câteva tipuri de rânduri diferite și redimensionarea ecranului. Veți vedea cum totul se schimbă și se adaptează fără a se descompune. Aceasta este puterea FlexBox copt în constructor, făcând Divi 5 o opțiune mai fiabilă și mai modernă.

Cum funcționează FlexBox în Divi 5

Dacă începeți, iată un pas rapid pentru a vă ajuta să vă simțiți încrezători atunci când utilizați FlexBox în Divi 5.

Controluri de aspect

Când comutați o secțiune, un rând sau o coloană pentru a flexa aspectul, apare un nou set de controale de aspect în setările de design> layout . Acestea vă oferă controlul vizual FlexBox chiar alături de opțiunile dvs. obișnuite.

• (1) Stil de aspect: Aici activați Flex. Odată setate, alte opțiuni specifice flexibilității, cum ar fi direcția, alinierea și distanțarea devin vizibile.
• (2) Diferență orizontală: adaugă spațiu între elementele de la stânga la dreapta.
• (3) GAP VERTICAL: Setează spațiul dintre elementele stivuite atunci când se utilizează machete de coloane.
• (4) Direcția de dispunere: Schimbă direcțiile de flux, rând, coloană sau inversate, astfel încât elementele să se poată alinia cot la cot sau de sus în jos.
• (5) Justificați conținutul: aliniază elementele de -a lungul axei principale. Puteți să le centrați, să le împingeți într -o parte sau să le răspândiți.
• (6) Aliniați elementele: aliniază elementele de -a lungul axei încrucișate, ceea ce este util atunci când aranjați articole vertical într -un rând orizontal.
• (7) Înfășurarea aspectului: Acest lucru permite elementele să se deplaseze la următoarea linie când spațiul se termină. Util în timp ce construiți machete care răspund la dimensiunea ecranului în loc să se spargă.

Să zicem că aveți un bar de marcă cu logo -uri și doriți ca acestea să fie mai mari. Cu o direcție flexibilă setată pe rând și înfășurarea aspectului , acestea vor curge automat în două rânduri atunci când nu există spațiu.

Alinierea elementelor în două rânduri este acum ușoară fără interogări media sau o soluție manuală.

Controluri și dimensiuni ale coloanelor

Odată ajuns în interiorul unui rând cu flex, fiecare coloană are o nouă setare sub proiectare> dimensionare numită CLOOL CLANSE . Acest lucru determină cât de mult spațiu ocupă o coloană pe baza conținutului și a împrejurimilor sale.

Puteți alege între contracție pentru a se potrivi (ceea ce face ca coloana să fie la fel de largă ca și conținutul acesteia) sau să crească pentru a umple (care întinde coloana pentru a ocupa un spațiu suplimentar).

De exemplu, dacă doriți ca o coloană de text să se simtă mai proeminentă și să aveți elemente de cărți care să le îmbrățișeze conținutul, ați seta cărțile să se micșoreze pentru a se potrivi și textul să crească pentru a se completa.

Controale de comenzi

Un alt instrument puternic, dar adesea trecut cu vederea este setarea comenzii sub fila Conținut . Acest lucru vă permite să reordonați vizual coloanele și modulele fără a schimba structura de aspect în cadrul fluxului sau în vizualizarea straturilor.

Spuneți că doriți ca un anumit modul să apară mai întâi pe mobil, dar al doilea pe desktop. Puteți atribui diferite valori de comandă la fiecare punct de întrerupere.

Cazuri de utilizare practică ale FlexBox

Să ne uităm la alte câteva cazuri de utilizare a flexbox -ului care sunt acum simplificate cu Divi 5.

1.. Aliniați vertical orice cu flex

Multă vreme, alinierea verticală a fost una dintre cele mai enervante probleme de aspect ale designului web. Ați încerca trucuri de căptușeală, poziționare absolută, marje manuale și ce nu doar să terminați cu ceva care arăta bine pe desktop, dar a fost rupt pe ecrane mai mici.

Cu Divi 5, durerea de cap a dispărut. Acum, dacă doriți să centrați conținutul pe verticală în interiorul unei secțiuni, trebuie doar să setați elementele de aliniere la centru.

Asta este. Aspectul se ajustează automat pe punctele de întrerupere, iar conținutul dvs. rămâne întotdeauna în locul dulce. Ceea ce obișnuia să ia gimnastica CSS este acum doar câteva clicuri în interiorul constructorului.

2. egalizați automat înălțimea cardului

Probabil că ați intrat în această problemă înainte. Creați un rând de cărți, cum ar fi o secțiune Blurb, și totul arată bine până când un articol are mai mult text decât celelalte. Dintr -o dată, aspectul tău se simte inegal. Unele coloane se întind, altele rămân scurte, iar designul pierde echilibrul.

Această curățare manuală nu mai este necesară. Când comutați un rând sau o secțiune la Flex, Divi aplică setări implicite care tratează fiecare coloană ca un element flex. Acest lucru îi face să se întindă automat pentru a se potrivi reciproc în înălțimea în același rând, indiferent de conținutul din interior.

De asemenea, rămâne receptiv. Pe ecrane mai mici, coloanele se înfășoară în rânduri noi, fără a avea nevoie de modificări suplimentare, iar comportamentul de înălțime egală continuă să se aplice.

3. Butoanele de înfășurare automat pe punctele de întrerupere

Păstrarea unui rând de butoane îngrijite și citite pe diferite dimensiuni ale ecranului poate fi o durere. De obicei, sfârșești adăugând rânduri noi sau ajustați manual aspectul pentru fiecare punct de întrerupere. Dar cu Divi 5, acest lucru nu mai este necesar.

Porniți aspectul Flex și activați înfășurarea aspectului în vizualizarea laptopului . Asta este. Butoanele se vor înfășura automat în mai multe linii pe ecrane mai mici, fără a rupe aspectul.

Butoanele își păstrează distanța și alinierea pe ecrane mai mari și se stivuiesc în mod natural pe tablete și telefoane. Puteți chiar să le reglați alinierea folosind conținutul de justificare și să controlați distanța dintre ele folosind GAP, astfel încât totul pare curat și intenționat la fiecare dimensiune.

Divi + FlexBox are sens

Ați văzut cum funcționează FlexBox, cum DIVI 5 îl face vizual și modul în care durerile de cap obișnuite durează acum câteva secunde în loc de ore. Divi 5 nu acceptă doar FlexBox - este construit în jurul ei. Fiecare secțiune, rând și coloană este gata să se comporte așa cum vă așteptați fără CSS personalizat.

FlexBox nu este doar o opțiune dacă proiectați cu Divi 5. Este implicit mai inteligent. Aspecte mai curate, mai puține soluții de rezolvare și un control receptiv s -au copt chiar în constructor. Aceasta este schimbarea și asta este ceva care te pregătește pentru viitorul designului web.