CSS Flexbox: A Modern Elrendezés

A webfejlesztés történelmében az elemek egymás mellé rendezése (layout építés) mindig is egy rémálom volt. A fejlesztők HTML táblázatokat, majd később CSS float trükköket használtak, amik folyamatosan széteső oldalakat eredményeztek. Ennek vetett véget a Flexible Box Layout, röviden a Flexbox.

Mi az a Flexbox?

A Flexbox egy egydimenziós elrendezési modell. Arra találták ki, hogy egy konténeren belül a gyermek elemeket tökéletesen el tudjuk osztani egy sorban (vízszintesen) vagy egy oszlopban (függőlegesen), még akkor is, ha a méretük ismeretlen vagy dinamikusan változik.

A Flex Konténer aktiválása

A Flexbox használatához először ki kell jelölnünk egy szülő elemet (konténert), és meg kell adnunk neki a display: flex; tulajdonságot. Amint ezt megtesszük, a benne lévő közvetlen gyermek elemek "flex itemekké" válnak, és alapértelmezésben egymás mellé ugranak egy sorba.

<div class="flex-kontener">
    <div class="doboz">1</div>
    <div class="doboz">2</div>
    <div class="doboz">3</div>
</div>

.flex-kontener {
    display: flex;
}

A legfontosabb Flexbox tulajdonságok

A Flexbox igazi ereje abban rejlik, ahogyan a konténeren belül igazítani tudjuk az elemeket. Ezt a szülő elemen (a konténeren) lévő tulajdonságokkal vezéreljük.

1. flex-direction (Az irány)

Meghatározza, hogy az elemek milyen irányban sorakozzanak fel.

• row (alapértelmezett): Balról jobbra, egy sorban.
• column: Fentről lefelé, egy oszlopban (mobilos nézetnél életmentő).

2. justify-content (Igazítás a főtengelyen)

Ha az irány row, akkor ez a vízszintes igazítást jelenti. Hogyan osszuk el az üres helyet az elemek között?

• flex-start: Minden elem balra tolódik.
• center: Minden elem középre kerül.
• space-between: Az első elem a bal szélre, az utolsó a jobb szélre tapad, a többi között pedig egyenlő üres hely lesz. (Tökéletes navigációs menükhöz!)

3. align-items (Igazítás a kereszttengelyen)

Ha az irány row, akkor ez a függőleges igazítást jelenti.

• stretch (alapértelmezett): Az elemek megnyúlnak, hogy kitöltsék a konténer magasságát.
• center: Az elemek függőlegesen középre kerülnek.

A Szent Grál: Elem tökéletes középre igazítása

Évtizedekig vicc tárgya volt a fejlesztők között, hogy mennyire nehéz egy div-et függőlegesen és vízszintesen is pontosan középre igazítani a képernyőn. A Flexboxszal ez pontosan 3 sor kód:

.tokeletes-kozep {
    display: flex;
    justify-content: center; /* Vízszintesen középre */
    align-items: center;     /* Függőlegesen középre */
    height: 100vh;           /* A konténer kitölti a teljes képernyőmagasságot */
}