Informatică Dezvoltare web
Flexbox CSS explicat
Flexbox CSS este un model de layout care permite aranjarea elementelor într-un container într-o singură direcție, fie pe orizontală, fie pe verticală. Acest sistem simplifică crearea de design-uri responsive și alinierea elementelor fără a folosi float sau poziționare fixă. Este ideal pentru componente precum meniuri, galerii sau bare laterale.
Proprietăți principale ale containerului Flex
- display: flex Transformă un element într-un container flexibil. Exemplu: div { display: flex; }.
- flex-direction Definește direcția elementelor: row (implicit), column, row-reverse, column-reverse.
- justify-content Alinează elementele pe axa principală: center, space-between, flex-start.
- align-items Alinează elementele pe axa transversală: stretch, center, flex-start.
Exemplu practic cu Flexbox
- 1 Pasul 1: Crează containerul HTML <div class="container"> <div>Element 1</div> <div>Element 2</div> <div>Element 3</div> </div>
- 2 Pasul 2: Aplică CSS Flexbox .container { display: flex; justify-content: space-around; align-items: center; height: 200px; background-color: lightgray; }
- 3 Pasul 3: Rezultatul Cele trei elemente vor fi distribuite uniform pe orizontală și centrate vertical în container.
Folosește Flexbox pentru componente simple și unidirecționale; testează pe diferite dimensiuni de ecran.