Flexbox #

Mi az a flexbox? #

Egy speciális szerkezet, amellyel különböző egydimenziós elrendezéseket valósíthatunk meg. Alapvetően sor vagy oszlop elrendezésbe tudjuk a benne található elemeket rendezni.

Mire érdemes használni? #

Az egyik legalapvetőbb felhasználása a menük, menüsávok kialakítása. Ugyanakkor bármilyen azonos magasságú (és/vagy szélességű) sorok vagy oszlopok megvalósítására is alkalmas, ilyen például egy banner az oldalon amely egyik oldalt egy térképet, másik oldalán az leérhetőségeket mutatja.

Felépítése #

Alapvetően két elemből áll.

• Flex container: Alap táruló elemünk lesz, ő fogja megkapni a display: flex; tulajdonságot.
• Flex item: Az összes olyan elem amit szeretnénk elrendezni a flexbox segítségével.

Sor elrendezés #

Alapvetően, ha külön nem adjuk meg, akkor egy sor elrendezést kapunk. Amennyiben explicit meg szeretnénk mondani, azt a flex-direction: row; segítségével tudjuk megtenni. A sorunknak a tengelyei a kövezkezők:

• Main axis/ Főtengely: Ez mindig a vízszintes tengely.
• Cross axis/ Kereszttengely: Ez mindig a függőleges tengely.

.row{
    display: flex;
    flex-direction: row;
}

Oszlop elrendezés #

Ebben az esetben már direktben meg kell mondanunk a flex-direction: column; segítségével, hogy változzon az elrendezésünk. Viszont ezzel együtt figyelni kell rá, hogy a tengelyeink is fordulnak.

• Main axis/ Főtengely: Ez a függőleges tengelyünk lesz.
• Cross axis / Kereszttengely: Ez pedig a vízszintes tengellyé válik

.row{
    display: flex;
    flex-direction: column;
}

A tároló további tulajdonságai #

Tördelés #

Amennyiben, az elemeink nem férnek el egy sorban beállíthatjuk, hogy az oldalunkon több sorban jelenjenek meg. Ezt a flex-wrap tulajdonsággal lehet állítani. Amely a következő értékekkel rendelkezhet:

Összevonás (Elrendezés és Tördelés) #

A tároló elemünk tulajdnoságait a flex-flow tulajdonság segítségével tudjuk összevonni, mégpedig úgy, hogy első értéke az elrendzés lesz, a második értéke pedig a tördelés

div { flex-flow: row; }

div { flex-flow: column wrap; }

div { flex-flow: row-reverse wrap-reverse; }

Az elemek tulajdonságai #

Sorbarendezés #

Amennyiben szeretnénk, hogy a HTML struktúra helyett a flexboxunkban más sorrendben legyenek elemeink (pl: egy reszponzív weboldalon lehezt, hogy más sorrendben kell összecsúszniuk), abban az esetben az order tulajdonság segítségével tudjuk megtenni. Az order számára bármilyen egész szám megadható és a legkisebbtől a legnagyobbig fogja egymás után pakolni az elemeket a böngésző.

Növekedés #

Előfordulhat, hogy szeretnénk, hogy egy elemünk nagyobb területet foglalhasson el a teljes boxból. Ekkor a flex-grow segítségével megadható az a tényezhő, hogy a többi elemhez képest mekkora helyet foglalhat el.

Zsugorodás #

Az előző alapján a flex-shrink azt állítja nekünk, hogy egy elem mennyire zsugorodhat össze a többi elemhez viszonyítva.

Alapméret #

Amennyiben szeretnénk egy elem számára konkrét méretet adni (pl: 200px) azt a flex-basis segítségével tehető meg.

Összevonás (Növekedés, zsugorodás, Alapméret) #

Lehetőségünk van a flex-grow, a flex-shrink és a flex-basis összevonására (ebben a sorrendben) a flex tulajdonság alatt.

Igazítások #

align-content #

A kereszttengely mentén igazítjuk a boxunk tartalmát. (sor -> függőleges | oszlop -> vízszintes) Értékei a következők lehetnek:

align-self #

Azt állíthatjuk be, hogy az adott elem hol jelenjen meg kereszttengely mentén a tárolóban. Az előző kettővel szemben, ezt nem a tarolóra, hanem az adott elemre kell beállítani!!! Értékei:

justify-content #

Az align-okkal szemben itt a főtengelyen állítjuk a boxunk tartalmának elhelyezését. Értékei a következők lehetnek:

justify-self #

Beállíthatjuk a főtengely mentén, hogy az adtott eleme hol jelenjen meg. Az előző kettővel szemben, ezt nem a tarolóra, hanem az adott elemre kell beállítani!!! Értékei:

Összevonás: place-content #

Az align-content és a justify-content összevonása

Összevonás: place-self #

Az align-self és a justify-self összevonása

Ellenőrző kérdések #

\pagebreak