CSS Flexbox
A Flexbox egy modern elrendezési modell a CSS-ben, amely lehetővé teszi az elemek rugalmas elrendezését egy sorban vagy oszlopban. Könnyen kezelhetjük vele az igazítást, a méretezést és a sorrendet is.
Mi az a Flexbox?
A Flexbox a display: flex beállítással aktiválható. Egy flex konténeren belül az elemek automatikusan rugalmasan rendeződnek, és számos beállítás áll rendelkezésünkre az igazításhoz és az elosztáshoz.
| Tulajdonság | Leírás |
|---|---|
| display: flex | Flex tartály létrehozása, amelyben a gyermekelemek rugalmasan rendeződnek. |
| justify-content | Vízszintes igazítás, például balra, jobbra, középre vagy egyenletes elosztással. |
| align-items | Függőleges igazítás a flex tartályon belül. |
| flex-direction | Meghatározza az irányt: sor (row) vagy oszlop (column). |
Flexbox alap példa
Az alábbi példában három elem egy flex konténerben található, amely egyenletesen elosztva, középre igazítva jelenik meg.
A justify-content: space-around és az align-items: center kombinációjával az elemek egyenletesen oszlanak el, és függőlegesen középre kerülnek.
Tippek a Flexbox használatához
A Flexbox egyszerűbbé teszi az elrendezések kezelését, különösen dinamikus vagy reszponzív design esetén.
- Használd a flexboxot, ha sorokat vagy oszlopokat kell gyorsan elrendezned.
- A flexbox különösen hasznos reszponzív designhoz, ahol az elemeknek változó méretű kijelzőkhöz kell igazodniuk.
- Kombinálhatod a flexboxot media query-kkel, hogy még rugalmasabb elrendezést érj el.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
