de Scott Domes

Cum funcționează Flexbox – explicat cu gif-uri mari, colorate și animate

Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Flexbox promite să ne salveze de relele CSS simple (cum ar fi alinierea verticală).

Ei bine, Flexbox îndeplinește acest obiectiv. Dar stăpânirea noului său model mental poate fi o provocare.

Deci, să aruncăm o privire animată asupra modului în care funcționează Flexbox, astfel încât să o putem folosi pentru a construi aspecte mai bune.

Principiul de bază al Flexbox este de a face machetele flexibile și intuitive.

ad-banner

Pentru a realiza acest lucru, permite containerelor să decidă singuri cum să-și distribuie în mod egal copiii – inclusiv dimensiunea și spațiul dintre ei.

Totul sună bine în principiu. Dar să vedem cum arată în practică.

În acest articol, ne vom scufunda în cele mai comune 5 proprietăți Flexbox. Vom explora ce fac, cum le puteți folosi și cum vor arăta efectiv rezultatele lor.

Proprietatea nr. 1: Afișaj: Flex

Iată exemplul nostru de pagină web:

Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Aveți patru divs colorate de diferite dimensiuni, ținute într-un container gri div. Începând de acum, fiecare div a fost implicit display: block. Fiecare pătrat ocupă astfel întreaga lățime a liniei sale.

Pentru a începe cu Flexbox, trebuie să vă configurați container intr-o container flex. Acest lucru este la fel de ușor ca:

#container {  display: flex;}
1611194165 798 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Nu s-au schimbat multe – divs-urile dvs. sunt afișate în linie acum, dar cam atât. Dar, în culise, ai făcut ceva puternic. Tu ai dat pătratelor tale ceva numit a context flex.

Acum puteți începe să le poziționați în acel context, cu mult mai puține dificultăți decât CSS tradițional.

Proprietatea nr. 2: direcția flexibilă

Un container Flexbox are două axe: o axă principală și o axă transversală, care implicit arată astfel:

1611194166 790 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

În mod implicit, elementele sunt aranjate de-a lungul axei principale, de la stânga la dreapta. Acesta este motivul pentru care pătratele dvs. au fost implicite la o linie orizontală odată ce ați aplicat display: flex.

Flex-directiontotuși, să vă rotim axa principală.

#container {  display: flex;  flex-direction: column;}
1611194166 975 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Aici trebuie făcută o distincție importantă: flex-direction: column nu aliniază pătratele pe axa transversală în loc de axa principală. Face ca axa principală să treacă de la orizontală la verticală.

Există și câteva alte opțiuni pentru direcția flexibilă: rând-invers și coloană-inversă.

1611194167 696 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Proprietatea nr. 3: justificați conținutul

Justify-content controlează modul în care aliniați elementele pe axa principală.

Aici, vă veți scufunda puțin mai adânc în distincția principală / transversală. Mai întâi, să revenim la flex-direction: row.

#container {  display: flex;  flex-direction: row;  justify-content: flex-start;}

Aveți la dispoziție cinci comenzi justify-content:

  1. Flex-start
  2. Flex-end
  3. Centru
  4. Spațiu între
  5. În jurul spațiului
1611194167 722 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Spațiul în jur și spațiul dintre acestea sunt cele mai puțin intuitive. Spațiul dintre acestea oferă spațiu egal între fiecare pătrat, dar nu între acesta și container.

Spațiul înconjurător pune o pernă egală de spațiu pe ambele părți ale pătratului – ceea ce înseamnă spațiul dintre pătratele exterioare și container este la jumătate cât spațiul dintre două pătrate (fiecare pătrat contribuind cu o marjă egală care nu se suprapune, dublând astfel spațiul).

O notă finală: amintiți-vă că justify-content funcționează de-a lungul axei principale, și direcția flexă comută axa principală. Acest lucru va fi important pe măsură ce treceți la …

Proprietatea # 4: Aliniați articolele

Dacă „obțineți” conținut justificat, elementele de aliniere vor fi o briză.

Pe măsură ce conținutul justificativ funcționează de-a lungul axei principale, align-items se aplică axei transversale.

1611194167 749 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Să ne resetăm direcție flexibilă pentru a vâsla, astfel încât axele noastre să arate la fel ca imaginea de mai sus.

Apoi, să ne scufundăm în comenzile align-items.

  1. flex-start
  2. flex-end
  3. centru
  4. întinde
  5. de bază

Primele trei sunt exact la fel ca justify-content, deci nimic nu prea fantezist aici.

Cu toate acestea, următoarele două sunt puțin diferite.

Aveți întindere, în care elementele ocupă întreaga axa transversală și linia de bază, în care partea de jos a etichetelor de paragraf sunt aliniate.

1611194167 830 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

(Rețineți că pentru align-items: stretch, A trebuit să setez înălțimea pătratelor la auto. În caz contrar, proprietatea înălțime ar suprascrie întinderea.)

Pentru linia de bază, rețineți că, dacă eliminați etichetele de paragraf, acestea aliniază partea de jos a pătratelor, astfel:

1611194168 236 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Pentru a demonstra mai bine axele principale și transversale, să combinăm elementele justify-content și align-item și să vedem cum funcționează diferit centrarea pentru cele două comenzi de direcție flexibilă:

1611194168 335 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Cu rândul, pătratele sunt așezate de-a lungul unei axe principale orizontale. Cu coloana, acestea cad de-a lungul unei axe principale verticale.

Chiar dacă pătratele sunt centrate atât pe verticală cât și pe orizontală în ambele cazuri, cele două nu sunt interschimbabile!

Proprietatea # 5: Aliniați-vă pe sine

Aliniați-vă vă permite să manipulați manual alinierea unui anumit element.

Practic este suprasolicitat alinia-elemente pentru un pătrat. Toate proprietățile sunt aceleași, deși implicit auto, în care urmează alinia-elemente a containerului.

#container {  align-items: flex-start;}
.square#one {  align-self: center;}// Only this square will be centered.

Să vedem cum arată asta. Vei aplica alinia-sine la două pătrate, iar pentru restul se aplică align-items: center și flex-direction: row.

1611194168 266 Cum functioneaza Flexbox explicat cu gif uri mari colorate si

Concluzie

Chiar dacă tocmai am zgâriat suprafața Flexbox, aceste comenzi ar trebui să vă fie suficiente pentru a gestiona majoritatea alinierilor de bază – și pentru a vă alinia pe verticală la conținutul inimii.

Dacă doriți să vedeți mai multe tutoriale GIF Flexbox sau dacă acest tutorial v-a fost de ajutor, apăsați inima verde de mai jos sau lăsați un comentariu.

Mulțumesc pentru lectură!