Mi az a CSS Flexbox?
A CSS Flexbox (Flexible Box Layout) egy egydimenziós elrendezési modell, amellyel sorban vagy oszlopban lehet helyet elosztani és elemeket igazítani. A flex konténert a display: flex tulajdonsággal kell megadni, közvetlen gyermekei flex elemekké válnak. A konténer főbb tulajdonságai: flex-direction (sor vagy oszlop), flex-wrap (egy- vs. többsoros), justify-content (főtengely-igazítás), align-items (kereszttengely-igazítás soronként) és align-content (több sor kereszttengely-igazítása). Az elem főbb tulajdonságai: flex-grow (mennyit nő az elem), flex-shrink (mennyit zsugorodik), flex-basis (kezdeti méret) és align-self (felülírja a konténer align-items értékét egy adott elemnél). A Flexbox ideális navigációs sávokhoz, kártyasorokhoz, középre igazított elrendezésekhez és bármilyen egydimenziós elrendezéshez.
A CSS Flexbox Generátor használata
-
Állítsa be a konténer tulajdonságait (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) a legördülő listák és a beviteli mező segítségével.
-
Kattintson bármelyik elemre az előnézetben a kiválasztáshoz (narancssárgára vált).
-
Állítsa be a kiválasztott elem flex-grow, flex-shrink, flex-basis és align-self értékét az elem panelen.
-
Kattintson a '+ Elem hozzáadása' gombra elemek hozzáadásához; kattintson az 'Eltávolítás' gombra a kiválasztott elem törléséhez.
-
Váltson a CSS és HTML fülek között a generált kód megtekintéséhez, majd kattintson a Másolás gombra.
-
Kattintson a 'Mindent visszaállít' gombra, hogy az alapértelmezett 3 elemes elrendezéssel kezdje újra.