Hogyan használd?
- Válassz egy mintát (középre igazítás, navigációs sáv, kártyarács, oldalsáv, lábléc alulra), vagy kezdd az alapokkal.
- Állítsd a flex-direction, flex-wrap, justify-content, align-items és gap értékét.
- Kattints egy elemre, és add meg a flex-grow, flex-shrink, flex-basis, order és align-self értékét.
- Húzd a doboz sarkát, hogy más szélességen is lásd, majd másold ki a kódot.
A két tengely
A flexbox egy főtengely mentén rendez: alapból vízszintesen (row), oszlopnál függőlegesen (column).
- A
justify-contenta főtengely mentén osztja el az elemeket (eleje, közepe, vége, egyenletes térköz). - Az
align-itemsa kereszttengelyen igazít (fent, középen, lent, kitöltve). - Az
align-contentcsak tördelésnél (flex-wrap: wrap) számít: a sorokat igazítja egymáshoz.
A leggyakoribb tévedés, hogy oszlop irányban a kettő szerepet cserél: ott a justify-content igazít függőlegesen.
grow, shrink, basis röviden
| Tulajdonság | Mit csinál | Tipikus érték |
|---|---|---|
| flex-grow | mennyit kap a maradék helyből | 1 a „töltsd ki” elemnek |
| flex-shrink | mennyire zsugorodhat | 0 az oldalsávnak |
| flex-basis | kiinduló méret a nyújtás előtt | 200px, 30%, auto |
A kártyarács minta flex-wrap: wrap és flex: 1 1 140px beállítással dolgozik: a kártyák legalább 140 px szélesek, és kitöltik a sort. Szigorú rácshoz a CSS grid generátor jobb választás.
Tailwind-kimenet
A tároló osztályai (flex flex-col justify-between items-center gap-[12px]) és az elemenkénti osztályok (grow, shrink-0, basis-[140px], self-end) külön sorban jelennek meg. Az alapértelmezett értékeket nem írjuk ki, így a kód rövid marad.
Gyakori kérdések
Hogyan teszek középre egy elemet flexboxszal?
A tárolóra: display: flex; justify-content: center; align-items: center. Ez a „Középre igazítás” minta.
Mi a különbség a justify-content és az align-items között?
A justify-content a főtengelyen, az align-items a kereszttengelyen igazít.
Flexbox vagy grid?
Egy sorba vagy oszlopba rendezéshez flexbox, kétdimenziós rácshoz grid.
Mit jelent a flex: 1?
flex-grow: 1, flex-shrink: 1, flex-basis: 0%: az elem egyenlő arányban osztozik a helyen.