Generator CSS Flexbox
Generatorul CSS Flexbox te lasă să setezi flex-direction, justify-content, align-items, flex-wrap, align-content și gap pe un container, să previzualizezi live până la 20 de elemente și să copiezi CSS-ul generat.
Despre acest instrument
Generatorul CSS Flexbox te lasă să setezi flex-direction, justify-content, align-items, flex-wrap, align-content și gap pe un container, să previzualizezi live până la 20 de elemente și să copiezi CSS-ul generat.
Cum se folosește
- Alege direcția și modul de încadrare (wrap).
- Setează justify-content și align-items (și align-content pentru rândurile încadrate).
- Setează gap-ul și numărul de elemente din previzualizare.
- Apasă Copy CSS pentru a folosi regulile containerului.
Bine de știut
- justify-content aliniază elementele pe axa principală; align-items le aliniază pe axa transversală.
- flex-direction: column inversează axele, așa că justify-content lucrează atunci pe verticală.
- align-content are efect doar când elementele se încadrează pe mai multe rânduri.
- Proprietatea gap funcționează în Flexbox în toate browserele majore actuale.
- Flexbox este unidimensional; folosește CSS Grid pentru rânduri și coloane în același timp.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum centrez un div cu Flexbox?
Pe părinte, setează display: flex; justify-content: center; align-items: center; — copilul este centrat pe orizontală și pe verticală.
Care este diferența dintre justify-content și align-items?
justify-content distribuie elementele pe axa principală (implicit un rând); align-items le poziționează pe axa transversală.
Când ar trebui să folosesc Flexbox în loc de Grid?
Folosește Flexbox pentru layout-uri unidimensionale, precum bare de navigare și rânduri de butoane, și Grid pentru layout-uri de pagină bidimensionale.
De ce align-content nu face nimic?
align-content se aplică doar când flex-wrap permite elementelor să se încadreze pe mai mult de un rând.