Flexbox în CSS & HTML: Instrucțiuni pentru alinierea pe axa principală

În acest ghid vei învăța cum să aliniezi elementele într-un Container Flex de-a lungul axei principale folosind Flexbox. Am descris deja alinierea de-a lungul axei transversale, dar axa principală este la fel de importantă. Tehnologia Flexbox îți oferă diferite modalități de a face alinierea elementelor tale flexibilă și ajustabilă. Hai să aruncăm o privire mai atentă asupra acestui subiect!

Concluziile principale

• Alinierea pe axa principală se face cu proprietatea justify-content.
• Poți folosi diferite valori, precum center, flex-start, flex-end, space-between și space-around, pentru a-ți ajusta aspectul.
• Setările Flexbox afectează direct aranjarea elementelor în direcția dorită.

Ghid pas cu pas

1. Inițializarea Containerului Flex

Începe prin a crea un Container Flex și a-i seta direcția de flex. În acest exemplu, vom seta direcția de flex pe row. Acest lucru înseamnă că elementele vor fi aranjate într-un rând de la stânga la dreapta.

2. Alinierea standard a elementelor

Dacă așezi elementele în container fără ajustări de stil speciale, vei observa că ele sunt aliniate implicit la începutul containerului. Poți să le dai o lățime de 100 de pixeli pentru a le ilustra.

3. Alinierea centrată

Pentru a centra elementele, folosești proprietatea CSS justify-content cu valoarea center. Astfel, elementele tale vor fi aliniate în mijlocul containerului, oferind un aspect foarte plăcut.

4. Alinierea elementelor la capăt

Dacă îți dorești ca elementele să fie aliniate la capătul containerului, poți folosi valoarea flex-end pentru justify-content. Astfel, elementele vor fi poziționate în partea dreaptă a containerului tău.

5. Alinierea elementelor la început

Comportamentul implicit fără ajustări este flex-start, ceea ce înseamnă că elementele rămân la începutul containerului. Această setare este utilă atunci când dorești o aranjare clară și ordonată a elementelor în partea de sus a containerului.

6. Schimbarea direcției de flex

Dacă schimbi direcția de flex la column, axa principală se transformă de la orizontală la verticală. Astfel, elementele vor fi aranjate acum de sus în jos.

7. Centrarea elementelor în aliniere verticală

Poți centra elementele în această nouă aliniere folosind de asemenea justify-content: center. Această setare asigură ca toate elementele să fie afișate în mijlocul containerului.

8. Aliniere la sfârșitul containerului

Dacă dorești ca elementele să fie în partea de jos a containerului, poți seta din nou flex-end. Acest lucru va plasa elementele la marginea inferioară a containerului.

9. Utilizarea proprietăților de spațiu

Flexbox îți permite de asemenea să controlezi spațiul dintre elementele tale folosind space-between, space-around și space-evenly. Aceste proprietăți distribuie spațiul disponibil în diferite moduri.

10. Utilizarea Space-Between

Cu justify-content: space-between, primul element rămâne la marginea superioară și ultimul element la marginea inferioară a containerului, iar spațiul dintre elemente este distribuit uniform.

11. Încercați space-around

Dacă folosiți space-around, se creează aceeași cantitate de spațiu în jurul fiecărui element. Această distanță devine vizibilă în mijlocul containerului, în timp ce elementele rămân distribuite uniform.

12. Utilizarea space-evenly

Prin utilizarea space-evenly se asigură că există spațiu uniform peste tot între elemente și marginea containerului.

Rezumat

În acest tutorial ai învățat cum să setezi alinierea în axa principală cu Flexbox. Prin utilizarea justify-content poți să-ți ajustezi poziționarea elementelor foarte flexibil. De asemenea, ai învățat diverse proprietăți care te ajută să obții un aspect dorit. Folosește aceste cunoștințe pentru a crea designuri atractive și prietenoase pentru utilizatori!