Ce este CSS Flexbox?
CSS Flexbox (Flexible Box Layout) este un model de machetă unidimensional pentru distribuirea spațiului și alinierea elementelor într-un rând sau coloană. Containerul flex este definit cu display: flex, iar copiii săi direcți devin elemente flex. Proprietăți cheie ale containerului: flex-direction (rând sau coloană), flex-wrap (o singură linie vs. multi-linie), justify-content (alinierea pe axa principală), align-items (alinierea pe axa transversală per linie) și align-content (alinierea pe axa transversală a mai multor linii). Proprietăți cheie ale elementului: flex-grow (cât de mult crește un element), flex-shrink (cât de mult se micșorează), flex-basis (dimensiunea inițială) și align-self (suprascrie align-items al containerului pentru un element specific). Flexbox este ideal pentru bare de navigare, rânduri de carduri, machete centrate și orice aranjament unidimensional.
Cum se utilizează Generatorul CSS Flexbox
-
Ajustați proprietățile containerului (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) folosind meniurile derulante și câmpul de introducere.
-
Faceți clic pe orice element din previzualizare pentru a-l selecta (devine portocaliu).
-
Setați flex-grow, flex-shrink, flex-basis și align-self ale elementului selectat în panoul elementului.
-
Faceți clic pe '+ Adaugă element' pentru a adăuga mai multe elemente; faceți clic pe 'Elimină' pentru a șterge elementul selectat.
-
Comutați între filele CSS și HTML pentru a vedea codul generat, apoi faceți clic pe Copiază.
-
Faceți clic pe 'Resetează tot' pentru a reîncepe cu macheta implicită de 3 elemente.