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.