5 capcane de evitat atunci când treceți la sistemul FlexBox de la Divi 5

Divi 5 tocmai a expediat sistemul său de layout bazat pe FlexBox. Înlocuiește motorul vechi de layout al blocului Divi 4 și deblochează noi controale puternice chiar în Visual Builder. Fiecare rând nou acum este implicit pentru a flexa aspectul. Cu excepția cazului în care ați folosit deja CSS FlexBox, această schimbare necesită o nouă mentalitate de design, deoarece Flex funcționează diferit. Dacă nu vă ajustați obiceiurile, vă veți bloca.

Această actualizare vă oferă controale vizuale pentru ambalare, direcție, distanțare, comandă și aliniere - toate încorporate. Fără CSS personalizate hacky. De asemenea, vine cu comenzi rapide de rând preconfigurate pentru a construi structuri complexe de rânduri cu o modificare minimă a setărilor de afișare. Unele caracteristici bazate pe bloc, cum ar fi secțiunile de specialitate și cu lățime completă, sunt depreciate, deoarece Flex acoperă acum toate aceste cazuri de utilizare.

Această postare intră în cele mai mari cinci capcane pe care le veți atinge atunci când treceți modelul mental de la bloc la flex în Divi 5.

Capcana nr. 1: forțarea flexiunii într -o mentalitate blocată

→ Flex necesită un nou model mental, nu doar noi controale.

Nimănui nu -i place schimbarea decât dacă știu că lovesc limitări foarte reale. Pentru mulți, vechiul sistem de aspect este ceea ce știau și erau confortabili. Dar a avut limitările sale. Cei care știau suficient despre CSS știau că vechiul sistem lipsea lucruri pe care Flexbox a fost proiectat pentru a le remedia. Evitarea primei capcane necesită înțelegerea faptului că FlexBox nu este doar un aspect bloc cu opțiuni suplimentare .

În Divi 4, modulele stivuite vertical în mod implicit - fiecare element s -a așezat sub cel dinaintea acestuia. Ați putea stiva lucrurile pe orizontală cu coloane, dar în acel moment, ați lucra cu mai multe rânduri + coloane în interiorul unei secțiuni pentru a construi un aspect. Acest lucru a fost previzibil și confortabil pentru mulți, dar a dus, de asemenea, la realitatea frustrantă de a nu putea avea două butoane cot la cot și alte provocări de proiectare.

Divi 5 funcționează diferit acum, deoarece containerele noi (adică, secțiuni, rânduri, coloane și grupuri) sunt setate la „flex” în mod implicit. Obțineți mai multe opțiuni specifice la nivelul containerului pentru aranjarea elementelor pentru copii. FlexBox este puternic, deoarece permite machete flexibile în cazul în care elementele sunt poziționate pe baza spațiului disponibil și a conținutului din ele. Mai multe despre asta în următoarea capcană . Acest lucru permite machetei să se adapteze la diferite dimensiuni și conținut ale ecranului, fără a se baza pe poziționarea fixă sau absolută. Iată un singur exemplu pentru a compara Flex cu Block.

Modulele de amenajare a blocului de bloc pe verticală de -a lungul axei blocului. FlexBox vă permite să alegeți între rând și coloană ca axă principală.

Fiecare setare și opțiune din UI corespunde direct cu proprietățile CSS reale adăugate la fiecare container.

Pitfall #2: Necunoscând cum se micșorează și se încadrează în dimensiunea elementelor pentru copii

→ Fără micșorare și creștere, aspectele tale nu se vor comporta așa cum era de așteptat.

Cu Flex în Divi 5, modulele pentru copii pot avea o lățime sau o înălțime setată. În plus, se pot micșora sau umple (lățimea sau înălțimea lor) în funcție de camera din interiorul containerului. În acest exemplu, modulele de text sunt setate la 45% lățime, ceea ce înseamnă că două module s -ar potrivi orizontal ca și în același rând. Dar dacă adăugăm un număr ciudat de module de text, nu vrem să existe un spațiu gol. Putem seta aceste module să crească flex, iar atunci când există spațiu disponibil la rând, aceste module vor crește pentru a se umple.

DIVI expune controale precum „Grow to Hill”, „Shrink to Fit” și setări personalizate pe elementele copilului din orice container flex (element copil> proiectare> dimensionare> crește pentru a umple, a se micșora pentru a se potrivi sau a fi personalizat ).

Setarea înălțimii și lățimii elementelor pentru copii se simte familiar dacă sunteți obișnuit să blocați machete. Dar cu FlexBox, setările de creștere și de micșorat vă permit să combinați dimensionarea fixă cu un comportament receptiv - adaptându -vă la spațiul disponibil în fiecare recipient. Adăugă complexitate, dar deblochează mult mai multă flexibilitate.

Reduceți-vă pentru a se potrivi și a crește pentru a umple (pe lângă Flex-Basis) sunt, de asemenea, foarte la îndemână pentru a vă ajuta să creați machete receptive. Pentru ca aspectul blocului să fie sensibil des, ar trebui să configurați mai multe puncte de întrerupere și lățimi/înălțimi la fiecare dintre aceste puncte de întrerupere. FlexBox poate beneficia de setări unice la diverse puncte de întrerupere, dar așa cum sugerează și numele, este foarte flexibil . Acest lucru este în special cazul atunci când utilizați Clamp () pentru tipografie. Folosind ambele împreună, împreună cu alte unități CSS relative, vă vor rupe nevoia constantă de puncte de întrerupere.

Să ne uităm la un alt exemplu construit cu FlexBox.

Containerul coloanei (părinte) este setat să se flexeze cu aceste setări:

• Decalaj orizontal și vertical : 30px (acest lucru ar putea folosi Calc sau Clemp pentru a fi puțin mai bun, chiar)
• Direcția de dispunere : inversul rândului (explicație pentru această decizie în Pitfall #4)
• Justificați conținutul : Centrul
• Aliniați articolele : centru
• Flex WRAP : WRAP REVERSE (Explicație pentru această decizie în Pituch #4)

Am așezat apoi trei elemente pentru copii în coloană. Un modul de rubrică, modul divizor și un modul de text. Iată setările relevante pentru fiecare:

• Modul de rubrică
  • Dimensiunea textului : Clamp (2rem, 1.5rem + 2VW, 3rem)
  • Lățime : Auto
  • Dimensiune flexibilă : micșorați pentru a se potrivi
• Modul de divizor
  • Lățime : Auto
  • Dimensiunea flexificării : micșorați -vă pentru a se potrivi și a crește pentru a umple
• Modul de text
  • Mărimea textului : Clemă (0,9375rem, 0,75rem + 0,4VW, 1rem)
  • Lățime : Auto
  • Dimensiune flexibilă : micșorați pentru a se potrivi

Cu o direcție de flexie a rândului, elementele pentru copii se aliniază orizontal ori de câte ori există loc. Modulul de text este cel mai larg, deci își umple propriul rând. Modulul divizor crește sau se micșorează, deoarece are lățimea automată și ambele flex-creștere, cât și flex-shrink activat. Modulul antet folosește doar lățimea sa intrinsecă și rămâne compact. Această configurație produce un aspect complet receptiv fără puncte de întrerupere.

Captul #3: Nu încălcați obiceiul marjei

→ Utilizați în schimb GAP - este mai inteligent, mai curat și făcut pentru flex.

În Divi 4, lacunele vizuale între module și alte elemente au necesitat marje (lacune verticale prin marginea de jos, lacune orizontale prin marginea stângă/dreapta). Când decalajul a fost aplicat la distanțarea coloanelor, Divi 4 a avut o setare de jgheab, dar nu a luat valori CSS standard și a folosit de fapt marja pe părțile laterale ale coloanelor pentru a crea decalajul. Acesta este același mod în care machetele de bloc funcționează în continuare. Dar acum există o abordare mai curată, mai eficientă.

Sistemul FlexBox al Divi 5 introduce controale de rânduri și goluri verticale sub proiectare> Layout > decalaj orizontal și vertical . Acestea sunt hărți la CSS Gap și Row-Gap. Golurile verticale se aplică automat fiecărui „rând flex” atunci când elementele se înfășoară pe o nouă linie. Același lucru este valabil și pentru golurile orizontale: ori de câte ori există elemente pentru copii unul lângă altul, decalajul va fi prezent. Aceste setări GAP acceptă, de asemenea, orice unitate CSS pozitivă, astfel încât să puteți utiliza Clamp () sau Calc () pentru a crea distanțe de decalaj responsive.

Acest lucru reduce nevoia de a aplica valorile marjei fiecărui element copil. Setarea decalajului se adaptează automat pe baza direcției flexibile și a numărului de copii din container pentru a aplica automat orice lacune. Marjele au încă locul lor, dar nevoia lor de distanțare a elementelor în interiorul unui recipient este redusă.

Captul 4

→ Comanda vizuală și ordinea semantică nu trebuie să se potrivească.

În mod implicit, elementele copilului dintr -un container Flex vor fi afișate în ordinea lor sursă. FlexBox și Divi 5 vă oferă posibilitatea de a specifica direcțiile inverse Flex și controalele de ordine pentru a schimba fluxul vizual al elementelor fără a schimba ordonarea HTML a elementelor.

Direcția inversă comutarea sub direcția de dispunere vă permite să inversați ordinea elementelor în direcția rândului, fie în direcția coloanei. Pentru a privi din nou exemplul de aspect din Pitfall #2, putem vedea de ce ne -am dori acest lucru. Puteți vedea în straturi că ordinea elementelor copilului este rubrica, apoi divizorul și, în final, modulul de text. Semantic, având titlul (un H2 în acest caz) în partea de sus a stivei are sens pentru cititorii de ecran. Cu toate acestea, titlul este suficient de evident vizual, fie că este primul sau ultimul, deoarece folosim o ierarhie vizuală cu dimensiunea textului său.

Utilizarea Row Reverse ca direcție de flex și WRAP Reverse păstrează comanda HTML (importantă pentru accesibilitate), permițându -mi, de asemenea, să proiectez lucrurile cum le imaginăm.

Puteți obține același lucru folosind comanda elementelor pentru copii, care se găsește în Divi atunci când faceți clic pe Setări ale elementului copilului> Fila Conținut> Comandă . Putem schimba ordinea în care va apărea doar acest element. În acest exemplu, obținem același rezultat final, dar cu o setare diferită - unul care ar putea avea mai mult sens pentru unii.

Pitupa #5: Uitând să setați învelișul

→ Flex nu se va rupe până la rânduri noi decât dacă îi spuneți.

Am menționat ambalarea mai devreme, dar merită propria secțiune. Noile containere flexibile implicite până la nicio înveliș. Acest lucru poate avea consecințe neașteptate. De exemplu, dacă adăugați patru module pentru copii, fiecare cu o lățime de 50%, vă așteptați să se prezinte pe două rânduri flexibile. Problema dvs. este pur și simplu că trebuie să permiteți recipientului dvs. să se înfășoare.

Divi include o comutare numită înfășurarea layout, care are trei stări: fără înfășurare, înveliș și înveliș. Trebuie să activați WRAP dacă doriți ca module să se spargă la linii noi la un prag. Așa susține Divi Structuri cu mai multe rânduri în interiorul unui singur container (rânduri cuibărite sau multiple nu sunt singura modalitate de a face acest lucru acum).

Luați -vă timp pentru a stăpâni FlexBox

Flexul în Divi 5 este mai puternic decât sistemul anterior de aspect al blocului Divi. Cu toate acestea, necesită o anumită învățare pentru a înțelege. FlexBox nu este o setare specifică Divi, de aceea este important să știți elementele de bază ale modului în care funcționează acest instrument CSS. Divi face ușor de implementat, deoarece toate setările pe care le puteți aplica în CSS sunt disponibile direct în editor. Dar conceptul este foarte diferit de bloc.

Datorită acestor diferențe, vă recomandăm să petreceți o oră folosind un instrument de predare interactiv pentru a înțelege FlexBox. Unul care este ușor de utilizat și într -adevăr trucul este FlexBogGy.com. Te duce prin 24 de provocări progresiv complexe, învățându -ți toate elementele de bază. Este mult mai bun decât DoomsCrolling timp de o oră.

Folosiți Flex cu Divi 5 astăzi

FlexBox în Divi 5 este sincer. Nu ghici ce vrei. Vă cere să decideți. Dar odată ce decideți, urmează flexibilitatea. Puteți construi fiecare structură de dispunere în mod responsabil, responsabil și în mod fiabil - chiar și cuibărită infinit - fără CSS sau hacks personalizate.