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ă:

Un ghid vizual catre CSS
afișaj: flex

Aspect aliniere verticală:

1611055749 415 Un ghid vizual catre CSS
flex-direction: coloană

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:

  1. Proprietățile containerului (flex-direction, flex-wrap, justify-content, align-items, align-content)
  2. 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:

1611055749 585 Un ghid vizual catre CSS
Recipient cu 3 cutii

Acum să adăugăm flex la container:

1611055749 808 Un ghid vizual catre CSS
display: flex;

Doar o linie de CSS a schimbat aspectul de la o direcție verticală la una orizontală.

Terminologii importante în jurul Flexbox

1611055750 670 Un ghid vizual catre CSS
terminologii legate de flexbox

Aceste terminologii vor fi utilizate în acest ghid.

  1. Container flexibil: Aceasta se referă la containerul care are display: flex; stabiliți-l.
  2. Articol flexibil: Aceștia sunt copiii individuali din interiorul containerului Flex
  3. Axa principală: În mod implicit este setat de la stânga la dreapta.
  4. 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:

  1. row este valoarea implicită a axei principale care indică de la stânga la dreapta. Axa transversală rămâne de sus în jos.
  2. row-reverse inversează direcția rândului de la dreapta la stânga. Din nou, axa transversală este lăsată neafectată.
1611055750 158 Un ghid vizual catre CSS
direcție flexibilă: rând-invers;

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.

1611055750 287 Un ghid vizual catre CSS
direcție flexibilă: coloană;

4. column-reverse este similar cu valoarea coloanei, singura diferență fiind că axa principală curge acum de jos în sus.

1611055750 348 Un ghid vizual catre CSS
direcție flexibilă: inversă coloană;

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.

  1. flex-wrap: no-wrap este valoarea implicită.
1611055751 428 Un ghid vizual catre CSS
fără împachetare. Fiecare bloc are 200 px într-un container de 500 px

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.

1611055751 917 Un ghid vizual catre CSS
set flex-wrap pentru a înfășura pentru același caz ca mai sus

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.

1611055751 801 Un ghid vizual catre CSS
Flex-wrap este acum setat la wrap-reverse

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 .

1611055751 61 Un ghid vizual catre CSS
1. justify-content: flex-start;
1611055752 96 Un ghid vizual catre CSS
2. justify-content: centru;
1611055752 7 Un ghid vizual catre CSS
3. justify-content: flex-end;
1611055752 434 Un ghid vizual catre CSS
4. justify-content: spațiu între;
1611055752 351 Un ghid vizual catre CSS
5. justify-content: spațiu-în jur;

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.

1611055752 842 Un ghid vizual catre CSS
1. align-items: flex-start;
1611055753 49 Un ghid vizual catre CSS
2. align-items: centru;
1611055753 358 Un ghid vizual catre CSS
3. align-items: flex-end;
1611055753 215 Un ghid vizual catre CSS
4. align-items: linia de bază;
1611055753 319 Un ghid vizual catre CSS
5. align-items: 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.

1611055754 628 Un ghid vizual catre CSS
1. align-content: stretch;
1611055754 675 Un ghid vizual catre CSS
2. align-content: flex-start;
1611055754 162 Un ghid vizual catre CSS
3. align-content: centru;
1611055754 133 Un ghid vizual catre CSS
4. align-content: flex-end;
1611055755 631 Un ghid vizual catre CSS
5. align-content: spațiu între;
1611055755 666 Un ghid vizual catre CSS
6. align-content: spațiu-în jurul;

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).

1611055755 503 Un ghid vizual catre CSS
align-items setat pentru flex-start pe containerul părinte
1611055755 733 Un ghid vizual catre CSS
aliniați-auto setat la capătul flexibil pe cutia portocalie

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.

1611055755 993 Un ghid vizual catre CSS
implicit – totul are valoarea 0
1611055756 648 Un ghid vizual catre CSS
setarea ordinii: -1 în caseta 4
1611055756 89 Un ghid vizual catre CSS
ordinea setării: 1 în caseta 3

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.

1611055757 868 Un ghid vizual catre CSS
lățime de 200 px și fără set de baze flexibile
1611055757 297 Un ghid vizual catre CSS
lățime de 200px și flex-base de 300px. Câștiguri pe baza flexibilă
1611055757 880 Un ghid vizual catre CSS
flex-based setat la 500 px. Articolele au o lățime mai mică de 500 px, dar ocupă întreg spațiul containerului
1611055758 725 Un ghid vizual catre CSS
coloane, înălțime setată la 50 px fiecare, fără bază flexibilă
1611055758 378 Un ghid vizual catre CSS
coloane, înălțimea setată la 50 px și baza flexibilă setată la 100 px. Câștigă pe baza flexibilă.

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.

1611055758 915 Un ghid vizual catre CSS
lățime setată la 200 px, fără creștere flexibilă
1611055758 924 Un ghid vizual catre CSS
flex-grow setat la 1 numai pe cutia roșie
1611055759 661 Un ghid vizual catre CSS
flex-grow setat la 1 pe ambele cutii
1611055759 816 Un ghid vizual catre CSS
flex-grow setat la 1 pe cutia roșie și 6 pe cutia portocalie.

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;

1611055759 823 Un ghid vizual catre CSS
fără flex-shrink. lățimea articolelor mai mari decât containerul
1611055759 54 Un ghid vizual catre CSS
flex-shrink: 2 pe cutia roșie
1611055759 89 Un ghid vizual catre CSS
flex-shrink: 4 pe cutia roșie

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