Flexbox Layout: Așa distribuiți elementele copil în mod egal

Flexbox este un modul de layout puternic în CSS, care te ajută să folosești eficient spațiul disponibil într-un container. În acest tutorial vei învăța cum să distribuiți uniform elementele copil într-un container flexibil. Acest lucru este deosebit de util pentru design-urile responsive, în care lățimea ferestrei poate să se schimbe. Hai să începem!

Cele mai importante concluzii

• Cu Flexbox poți distribui uniform elementele copil într-un layout, ajustând valorile flex ale elementelor corespunzător.
• Poți să-ți personalizezi flexibil lățimea și înălțimea elementelor copil, astfel încât să se adapteze automat spațiului disponibil, fără să fie nevoie de dimensiuni fixe.

Ghid pas cu pas

Pentru a înțelege cum să distribuiți uniform elementele copil într-un container flexibil, urmați acești pași:

Mai întâi, creați un container flexibil, aplicând proprietatea CSS display: flex;. Aici aveți un exemplu simplu despre cum puteți face acest lucru. Asigurați-vă că containerul este aliniat în format row:

În acest stadiu, spațiul este distribuit uniform către toate elementele copil, atâta timp cât aceste elemente copil nu au lățimi fixe. Dacă setați lățimea elementelor copil și le fixați la 100 pixeli, acestea vor fi distribuite uniform în container, dar aceasta nu este cea mai bună opțiune pentru un design responsiv:

Dacă eliminați lățimile fixe, veți observa că spațiul este redus drastic, în special atunci când textul din elementele copil lipsește. În acest caz, totul se restrânge la lățimea minimă definită de text:

Pentru a distribui uniform spațiul disponibil, trebuie să setați valoarea flex pentru elementele copil. Acest lucru se face ușor prin aplicarea proprietății flex, care vă permite să definiți o parte proporțională din spațiul disponibil. Setează valoarea flex pentru fiecare element copil la 1:

Odată ce ați făcut asta, veți observa că toate elementele copil au distribuit spațiul uniform. Aceasta este o soluție foarte flexibilă, deoarece se adaptează dinamic la lățimea containerului:

Puteți, de asemenea, să variați valorile flex pentru a crea proporții diferite. De exemplu, dacă primul element ar trebui să primească jumătate din spațiu, îl puteți seta la flex: 2;, în timp ce celelalte elemente rămân la flex: 1;:

După ce ați ajustat valorile, elementele copil vor fi distribuite conform valorilor setate. Datorită părților flexibile pe care le-ați atribuit, primul element primește mai mult spațiu decât celelalte:

Atunci când modificați lățimea containerului, proporțiile rămân stabile. Indiferent dacă lățimea este de 800 de pixeli sau 400 de pixeli, elementele copil se adaptează automat și distribuie spațiul uniform în funcție de valorile flex stabilite anterior:

Puteți ajusta ușor proprietățile Flexbox schimbând proprietatea flex-direction. De exemplu, dacă modificați containerul flex de la row la column, logica distribuției rămâne aceeași. Elementele copil vor fi aranjate vertical:

Asigurați-vă că înălțimea elementelor copil nu este setată fix pentru a păstra flexibilitatea. Acest lucru funcționează foarte bine pentru design-urile responsive, deoarece elementele copil se adaptează în funcție de dimensiunea și orientarea ecranului:

În acest fel, puteți crea un layout puternic responsiv, asigurându-vă că design-ul dvs. arată excelent atât pe desktop, cât și pe mobil.

Rezumat

În acest tutorial ai învățat cum să folosești Flexbox în CSS și HTML pentru a distribui uniform elementele copil. Datorită proprietăților Flex, poți crea aspecte responsive care se adaptează perfect la diferite dimensiuni și formate de ecran.