de Zeeshaan Maudarbocus
Ce este CSS Flexbox?
Conform documentelor web MDN:
„CSS Flexible Box Layout este un modul CSS care definește un model de cutie CSS optimizat pentru proiectarea interfeței cu utilizatorul și aspectul articolelor într-o singură dimensiune. În modelul de dispunere flexibilă, copiii unui container flexibil pot fi așezați în orice direcție și își pot „flexiona” dimensiunile, fie crescând pentru a umple spațiul neutilizat, fie micșorându-se pentru a evita revărsarea părintelui. Atât alinierea orizontală, cât și cea verticală a copiilor pot fi ușor manipulate. ”
Deci, pentru a rezuma, este un modul de aspect care face lucrurile mai ușoare să se alinieze și să distribuie spațiul între articolele dintr-un container.
Să aruncăm o privire rapidă asupra câtorva exemple de ceea ce se poate face cu doar cel puțin 1-2 linii de coduri folosind CSS flexbox:
Aspect aliniere orizontală:
Aspect aliniere verticală:
Este destul de interesant, având în vedere că doar una sau două linii de CSS erau necesare pentru a manipula aspectul din interiorul fiecărui container.
Cele elementare
Proprietățile Flexbox pot fi clasificate în 2 tipuri principale:
- Proprietățile containerului (flex-direction, flex-wrap, justify-content, align-items, align-content)
- Proprietățile articolului Flex (comandă, flex, flex-creștere, flex-micșorare, alin-auto)
Afișaj: flex
Prima proprietate nu este specifică flexbox-ului. Această proprietate este display
pe care le setăm la valoarea: flex
. Aceasta este setată pe containerul care conține articolele pe care dorim să le manipulăm.
Să adăugăm câteva elemente vizuale pentru a înțelege cum funcționează:
Dacă inițial avem un container, cu 3 cutii ( div
) în interiorul acestuia. Așa vor arăta:
Acum să adăugăm flex
la container:
Doar o linie de CSS a schimbat aspectul de la o direcție verticală la una orizontală.
Terminologii importante în jurul Flexbox
Aceste terminologii vor fi utilizate în acest ghid.
-
Container flexibil: Aceasta se referă la containerul care are
display: flex;
stabiliți-l. - Articol flexibil: Aceștia sunt copiii individuali din interiorul containerului Flex
- Axa principală: În mod implicit este setat de la stânga la dreapta.
- Axa transversală: În mod implicit este setat de sus în jos.
De îndată ce display: flex
este așezat pe un container, aceste axe imaginare vor funcționa împreună pentru a determina modul în care elementele flexibile din interiorul containerului flex ar trebui să se deplaseze și să se comporte. Aceste două axe schimbă direcțiile, ori de câte ori schimbăm anumite proprietăți flexbox, care sunt discutate mai jos.
Direcție flexibilă
Această proprietate determină direcția axelor imaginare. Axele, la rândul lor, determină modul în care trebuie așezate articolele din containerul flexibil. Este nevoie de următoarele 4 valori:
-
row
este valoarea implicită a axei principale care indică de la stânga la dreapta. Axa transversală rămâne de sus în jos. -
row-reverse
inversează direcția rândului de la dreapta la stânga. Din nou, axa transversală este lăsată neafectată.
3. column
schimbă axa principală de la axa orizontală la axa verticală. Însemnând că axa principală curge acum de sus în jos în timp ce axa transversală curge acum de la stânga la dreapta.
4. column-reverse
este similar cu valoarea coloanei, singura diferență fiind că axa principală curge acum de jos în sus.
Flex-wrap
Containerul flexibil în mod implicit nu permite articolelor să ocupe mai multe linii la rând. În schimb, toate articolele vor fi strânse pentru a se încadra într-un singur rând, adică nu permite înfășurarea în mai multe linii.
-
flex-wrap: no-wrap
este valoarea implicită.
2. flex-wrap: wrap
. Prin schimbarea acelei proprietăți în wrap
, ne putem asigura acum că fiecare element flexibil își va păstra dimensiunile respective. Dacă nu se pot încadra pe o linie, se vor înfășura într-un rând sau coloană următoare, în funcție de direcția de flexie.
Dacă direcția de flexare a fost setată la rând-invers, atunci articolele vor trece pe rândul următor începând de la dreapta spre stânga.
3. wrap-reverse
pe de altă parte, va înfășura următorul rând de articole flexibile deasupra celui inițial, tot de la stânga la dreapta.
Justify-content
Această proprietate este folosită foarte des. Scopul său este de a distribui spațiu între articole flexibile într-un container flexibil de-a lungul axa principală. Valoarea sa implicită este setată la flex-start
.
Tine minte: Dacă direcția de flexare a fost setată pe coloană, atunci axa principală ar curge acum de sus în jos. Înțelesul că justificarea conținutului ar fi acum distribuirea articolelor în mod vertical.
Aliniați-elementele
Această proprietate este la fel de populară ca justify-content
și este utilizat în mod regulat cu flexbox. Face același lucru ca și justify-content
cu singura diferență fiind că funcționează de-a lungul axa transversală. Valoarea implicită pentru align-items
este stretch
.
Tine minte: Dacă direcția de flexare a fost setată pe coloană, atunci axa transversală ar curge acum de la stânga la dreapta. Însemnând că itemii aliniați ar distribui acum articolele într-un mod orizontal.
Aliniați-conținutul
Această proprietate este similară și poate fi ușor confundată cu align-items
. Scopul acestei proprietăți este de a determina modul în care spațiul dintre rânduri într-un container flexibil trebuie distribuit de-a lungul axa transversală.
In timp ce align-items
vizează spațiul dintre elementele flexibile, align-content
vizează rândurile dintre articole. Valoarea implicită pentru align-content
este stretch
.
Proprietăți element flexibil
Este timpul să treceți la al doilea tip de proprietăți flexbox care ne permite să vizăm obiectele individuale din interiorul unui container flexibil.
Aliniați-vă
Această proprietate vă permite să aliniați un element flex individual de-a lungul axa transversală. Înlocuiește alinierea setată la container align-items
.
Are, de asemenea, aceleași proprietăți ca și align-items
(Vezi deasupra).
Ordin
Această proprietate ne permite să reordonăm pozițiile articolelor flexibile individuale în interiorul containerului flexibil. În mod implicit, tuturor articolelor li se atribuie o valoare 0.
Prin atribuirea unei valori mai mici (-ve) sau mai mari (+ ve) prin order
pe articolele individuale, acel element specific se va deplasa pentru a fi poziționat în funcție de valorile lor.
Ordinea va urma cea mai logică convenție, adică -ve, 0, + ve. Cel mai mic număr va merge în extrema stângă și cel mai mare număr în extrema dreaptă, presupunând că orice altceva este setat ca implicit. Dacă există elemente cărora nu li s-a atribuit nicio valoare nouă, acestea rămân 0.
Notă: Casetele 1, 2, 5 și 6 din exemplul de mai sus sunt toate încă la valoarea implicită 0. Pentru a clarifica, cele șase casete de mai sus au următoarele valori: -1, 0, 0, 0, 0, 1.
Dacă doriți să plasați o casetă în fața casetei numărul 4, atunci trebuie să setați caseta vizată la o comandă de -2 sau mai mică.
Flex-base, Flex-grow și Flex-Shrink
Până în prezent, toate articolele flexibile erau egale ca dimensiune. Să vedem acum cum putem face ca un anumit articol flexibil să ocupe mai mult spațiu în interiorul unui container flexibil în comparație cu celelalte articole din interiorul aceluiași container.
Flex-bază
Această proprietate specifică ideal dimensiunea unui articol flexibil inainte de este plasat într-un recipient flexibil. Funcționează similar cu lățimea atunci când se lucrează cu rânduri. Funcționează ca înălțimea atunci când se lucrează cu coloane. Deci, dacă lucrăm cu coloane și unui element i s-a dat atât înălțimea, cât și baza flexibilă, baza flexibilă va avea prioritate, deoarece este ideal înălțimea pe care o va lua un element flexibil dacă există suficient spațiu disponibil.
Acestea fiind spuse, dacă nu există suficient spațiu și nu există nicio înălțime sau lățime atribuită articolelor. Articolele vor lua înălțimea maximă sau lățimea maximă disponibilă în container.
Flex-grow
Această proprietate determină modul în care elementele flexibile pot crește pentru a umple spațiul neutilizat într-un container flexibil.
Dacă atribuim un flex-grow: 1
la toate casetele, toate vor lua spațiul rămas în mod egal, care este, de asemenea, valoarea sa implicită. Numărul poate fi orice, atâta timp cât sunt toate la fel.
Dacă dăm flex-grow: 1
unui articol și dați un al doilea un flex-grow: 2
, atunci al doilea element va ocupa de două ori mai mult spațiu neutilizat decât în comparație cu primul.
Acest lucru se aplică atât rândurilor, cât și coloanelor.
Micșorare flexibilă
Această proprietate determină modul în care elementele flexibile se pot micșora ori de câte ori există nu suficient spațiu într-un container flexibil.
flex-shrink: 1
este valoarea implicită, ceea ce înseamnă că toate articolele se vor micșora în mod implicit la aceeași rată.
Notă: flex-shrink: 0;
înseamnă că acest articol specific nu ar trebui să se micșoreze niciodată.
flex-shrink: 2;
înseamnă că acest articol specific ar trebui să se micșoreze mai repede decât celelalte din flex-shrink: 1;
Contracta
Aceasta este versiunea prescurtată pentru flex-grow, flex-shrink și flex-base în acea ordine specială.
Dacă trebuie să utilizați toate cele trei de mai sus, puteți utiliza pur și simplu așa ceva:
flex: 0 2 200px;
unde 0 se referă la flex-grow, 2 se referă la flex-shrink și 200px se referă la baza flex.
Felicitări!
Asta e! Acestea sunt ingredientele cheie pentru a deveni un maestru flex. Și, ca pentru orice alt lucru din viață și din cod, practica se perfecționează. Vă recomand cu încredere să puneți în practică acest ghid pentru a înțelege practic. Un exemplu ar putea fi să începeți cu ceva mic, cum ar fi o simplă bară de navigare.
De asemenea, puteți verifica linkul către colecția mea Codepen pe flex-box pe care le-am folosit pentru a crea acele flexbox-uri în imaginile de mai sus și pentru a le modifica pentru a vedea cum se schimbă.
Vă mulțumim că ați citit acest ghid pe flexbox. Sper că a fost de ajutor și informativ. Dacă aveți întrebări sau doriți să ne împărtășiți părerile dvs. cu privire la acest subiect, vă rugăm să nu ezitați să contactați secțiunea de comentarii sau prin e-mail la [email protected]
Dacă ați găsit valoroasă această citire, vă rugăm să arătați acestui articol ceva dragoste, lăsând câteva clape în urmă, astfel încât și alți dezvoltatori să o poată găsi.
ZeeshaanMaudar – Prezentare generală
Cod pentru distracție Cod pentru o schimbare Cod pentru binele social – ZeeshaanMaudargithub.com