Un ghid complet pentru comanda și reordonarea Flexbox

Modulul layout flexbox ne permite să așezăm elemente flexibile în orice ordine și direcție. Comanda Flexbox este, de fapt, mai ușoară decât comandarea cu flotoare sau grila CSS, chiar dacă s-ar putea să nu credeți asta la început. Deoarece flexbox este un model de aspect unidimensional, spre deosebire de grila CSS care este bidimensională, trebuie doar să acordați atenție unei singure direcții. Regulile sunt, de asemenea, definite clar de W3C, deci nu trebuie să vă ocupați de mizeria obișnuită a flotorilor și a clarificărilor.

Citiți acest ghid, veți învăța cum să utilizați următoarele proprietăți flexbox în scopul de a comanda:

• flex-direcție
• flex-wrap
• -Flow flex
• Ordin

Comandarea Vs. reordonare

Când vorbim despre comanda flexbox, trebuie să clarificăm diferența dintre ordonare și reordonare. 

Ce este Ordonarea?

Când configuram un layout flexbox, trebuie să definim mai întâi sursa Ordin, ceea ce înseamnă că trebuie să decidem cum sunt poziționate axele containerului flexibil. Am scris în detaliu despre modul în care axele flexbox lucrează în ghidul meu despre alinierea flexboxului.

Pe scurt, fiecare container flexibil are două axe: axa principală și axa transversală. Axa principală va avea una din cele patru direcții, iar axa transversală va fi întotdeauna perpendiculară pe aceea:

1. de la stânga la dreapta
2. de la dreapta la stanga
3. de sus pana jos
4. de sus în sus

Axa transversală este întotdeauna perpendiculară pe axa principală. 

Am stabilit axa principală cu flex-direcție proprietatea, atunci decidem cum se vor înfășura elementele flexibile, folosind flex-wrap proprietate. Aceste două proprietăți determină modul în care browserul va stabili elementele din interiorul containerului flexibil.

Ce este Reordonarea?

Flexbox ne permite, de asemenea, să manipulăm în mod efectiv ordinea sursă implicită reordonare, cu ajutorul Ordin proprietate. Reordonarea înseamnă că modificăm redarea vizuală a elementelor, în timp ce ordinea sursă rămâne intactă. 

Dacă utilizăm capabilitățile de rearanjare ale flexbox, nu trebuie să schimbăm structura documentului HTML doar din motive de prezentare vizuală. Deci, utilizatorii de cititoare de ecran (și motoarele de căutare) pot obține conținutul într-un mod logic structurat (de exemplu, bara laterală nu va avea prioritate față de conținutul principal). 

Comandarea Flexbox

Comanda Flexbox se întâmplă cu proprietățile flex-direction și flex-wrap. Flex-direcție specifică direcția axei principale. Pot avea următoarele valori:

1. rând (implicit): de la stânga la dreapta
2. rând-revers axa principală: de la dreapta la stânga
3. coloană axa principală: de sus în jos
4. coloană inversă axa principală: de jos în sus

Flex-folie definește dacă elementele flex sunt așezate într-o singură linie sau înfășurate pe mai multe linii. Controlează de asemenea direcția axei încrucișate. Poate avea trei valori:

1. nowrap (implicit) stabilește elemente flexibile într-o singură linie; axa transversală se află în poziția implicită
2. împacheta stabilește elemente flexibile în mai multe linii; axa transversală se află în poziția implicită
3. wrap-revers stabilește elemente flexibile în mai multe linii; axa transversală este inversată

Poziția prestabilită a axei încrucișate este:

• de sus în jos în cazul rând și rând-revers
• de la stânga la dreapta în cazul coloană și coloană inversă

În articolul meu precedent despre alinierea flexbox, puteți găsi patru exemple detaliate (cu demonstrații) despre cum să configurați axa principală în patru direcții diferite folosind flex-direcție. Cu toate acestea, atunci când discutăm despre comanda flexbox, cred că este mai important să știți cum să utilizați flex-direcție și flex-wrap proprietăţi împreună pentru a obține ordinea sursă pe care o căutăm.

Un exemplu de cod rapid

Vom folosi un exemplu simplu de cod pentru a vedea cum funcționează comenzile flexbox. HTML-ul conține doar câteva diviziuni:

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 

.recipient div va fi containerul flex și divs cu .articol clasa va fi elementele flexibile. Vom folosi (aproape) același CSS în toate exemplele, doar flex-direcție și flex-wrap proprietățile se vor schimba. Iată cum arată CSS-ul nostru cu rând și împacheta valori:

html background: # fff7f6;  .container display: flex; direcția flexibilă: rând; flex-wrap: folie;  .item font-size: 2rem; linia-înălțime: 1; text-align: centru; padding: 3rem; fundal: mistyrose; frontieră: roșii solide de 3px; culoare: roșii; margine: 6px; 

Iată același exemplu într-o demonstrație CodePen:

Comandarea cu Rând și Coloană

Acum, am ajuns la partea cu adevărat interesantă! Nu este prea dificil să înțelegi comanda flexbox în teorie, dar folosirea ei în practică poate fi cu siguranță o provocare. Acest lucru se întâmplă deoarece este dificil vedea cât de diferite variații ale flex-direcție și flex-wrap comparați unul cu celălalt.

În stiloul încorporat de mai jos, puteți vedea cum direcție flexibilă: rând și direcția flex: coloană layouts lucrează împreună cu valori diferite ale flex-wrap proprietate. Utilizați comenzile de formular pentru a vedea combinații diferite.

După cum puteți vedea, când flex-direcție este rând, Articolele flexibile sunt așezate orizontal, de la stânga la dreapta. Când o folosim wrap-revers in loc de împacheta, flexbox începe să stabilească elementele din fund, în loc de top. Acest lucru se întâmplă pentru că wrap-revers inversează direcția axei transversale.

Cand flex-direcție este coloană, articolele sunt așezate vertical, de sus în jos. Și când o vom folosi wrap-revers in loc de împacheta, flexbox începe să stabilească elementele din dreapta (acum acesta este punctul de plecare al axei încrucișate), în loc de stânga.

Comandarea cu rând-revers și coloană inversă

Acum, să aruncăm o privire la modul în care flexbox stabilește elementele atunci când direcția flex este rând-revers și coloană inversă.

După cum puteți vedea în demo-ul de mai sus, flexbox-ul începe să plaseze elementele de la începutul axei principale în ambele cazuri, la fel ca înainte. Axa principală a rând-revers aspectul rulează de la de la dreapta la stanga, astfel incat flexbox incepe sa dea elementele din dreapta. Și, axa principală a coloană inversă aspectul rulează de la de sus în sus, astfel încât elementele să înceapă să curgă din partea inferioară a containerului flexibil.

Când o folosim flex-wrap: folie, flexbox începe să înfășoare articolele din top cand flex-direcție este rând-revers și de la stânga când este coloană inversă, deoarece acestea sunt punctele de plecare ale axei încrucișate în respectivele cazuri.

Când întoarcem direcția de înfășurare la flex-wrap: wrap-reverse, axa transversală se va desfășura în direcția opusă. Se va indica de la de sus în sus cand flex-direcție este rând-revers, și din de la dreapta la stanga când este coloană inversă.

Lucrurile de viteză sus cu -Flow flex stenografie

CSS are, de asemenea, o scurtă însemnătate pentru flex-direcție și flex-wrap proprietăți. Se numește flex-flow. Pentru ao folosi, trebuie să enumerăm cele două proprietăți una după alta în felul următor:

.container-1 flex-flow: wrap;  .container-2 flex-flow: coloană inversă wrap-reverse; 

Reordonarea cu Flexbox

E timpul să privim lucrurile puțin diferit. 

Proprietatea de comandă modifică ordinea implicită a elementelor flex cu care definim flex-direcție și -Flow flex. Afectează numai randarea vizuală a elementelor, deci nu afectează modul în care cititorii de ecran și alți agenți de utilizare non-CSS citesc codul sursă.

Spre deosebire de proprietățile menționate anterior, le folosim Ordin pe flex articole, în loc de flex recipient. Poate să ia orice valoare întregă, iar valoarea implicită este 0.

Următorul exemplu se mută .item-3 la punctul de plecare al axei principale. Deoarece toate elementele au valoarea 0 ca valoare implicită, este suficient să utilizați ordine: -1 regula pentru a deveni primul element din container:

.element-3 ordine: -1; 

Veți observa că putem folosi aceeași logică pentru a ne mișca .item-3 până la capătul axei principale. Trebuie doar să definim un pozitiv Ordin pentru aceasta.

Desigur, putem reordona cât mai multe dintre aceste elemente flexibile așa cum ne dorim (desi trebuie sa reordonare cont de faptul că tot ceea ce, probabil, nu este cel mai prietenos de accesibilitate decizie vreodată). Ordin proprietățile diferitelor elemente flexibile sunt întotdeauna relativ unele cu celelalte. Mai jos, puteți vedea cum să reordonați mai multe elemente din interiorul containerului flexibil.

.element-3 ordine: -1;  .item-4 ordine: -2;  .item-5 ordine: 2;  .item-7 ordine: 1; 

Comandarea și accesibilitatea

Cel mai important lucru pe care trebuie să-l înțelegem este că Ordin proprietatea nu afectează comenzile de pictură, vorbire și navigare secvențială. Aceasta înseamnă că atunci când modificăm ordinea elementelor noastre flexibile, utilizatorii de medii non-vizuale nu vor experimenta modificările. De exemplu, utilizatorii care se bazează pe navigarea prin tastatură se vor mișca în continuare prin legăturile din ordinea sursă originală.

Acest comportament flexbox poate fi util în unele cazuri. De exemplu, este posibil să se facă accesibil așa-numitul "Layout Holy Grail" cu ajutorul comenzii flexbox. Graal Layout Sfânt este popular aspectul blog cu un antet, un subsol și două bare laterale: unul pe stânga și una pe dreapta conținutul principal. 

În acest aspect, de obicei, punem bara laterală stângă inainte de conținutul principal din codul HTML. Cu toate acestea, din punctul de vedere al accesibilității, utilizatorii de tehnologii de asistență ar trebui să întâlnească mai întâi conținutul principal. Flexbox este perfect pentru acest lucru. Putem plasa conținutul principal în fața celor două bare laterale în marcajul nostru. Apoi, trebuie doar să punem bara laterală și conținutul principal în poziția corectă folosind Ordin proprietate:

.sidebar-stânga ordine: 1;  articol ordine: 2; . sidebar-right ordine: 3; 

Modurile Flexbox & Writing

Tot ceea ce se spune în acest tutorial se aplică modului de scriere LTR (stânga-dreapta). Axele Flexbox respectă de fapt direcția de scriere a documentului, care poate fi configurată cu proprietățile direcției și modului de scriere. De aceea, în modul de scriere LTR, axa principală rulează de la stânga la dreapta când flex-direcție este rând. În modul de scriere RTL, rulează în direcția opusă, de la dreapta la stânga, iar tot ce se schimbă în consecință.

Acesta este un (Flex) Wrap!

Acest tutorial a fost a doua parte a seriei flexbox. Asigurați-vă că ați citit prima parte despre alinierea flexbox, pentru a afla cum să aliniați elementele flexibile de-a lungul axelor principale și celor încrucișate. Dacă doriți să aflați mai multe despre comanda flexbox, MDN are un articol foarte informativ pe această temă. 

Aflați mai multe