9.1. fejezet¶

A Flexbox egy CSS layout modul, amelyet a weboldalak elrendezésének és igazításának rugalmasabb és hatékonyabb módjára terveztek. Az elrendezés modellje egy konténeren (flex container) alapul, amelyben rugalmas elemek (flex items) találhatók. Ez a modul különösen hasznos a különböző méretű és elrendezésű elemek dinamikus és reszponzív kezelésére.

Flexbox Konténer¶

A Flexbox használatához először meghatározzuk a flex konténert. Ezt úgy érjük el, hogy display tulajdonságát flex vagy inline-flex értékre állítjuk.

Példa: egyszerű flex konténer létrehozása

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Konténer Példa</title>
    <style>
        .flex-container {
            display: flex;
            background-color: lightgrey;
        }

        .flex-container > div {
            background-color: dodgerblue;
            color: white;
            margin: 10px;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

A fenti példában egy egyszerű flex konténert állítunk be a display: flex; használatával. A konténer három gyermekelemet tartalmaz, amelyek mindegyike a konténeren belül helyezkedik el. Az elemek kék háttérszínt kaptak, fehér szövegekkel, és középre igazított tartalommal.

Konténer Elemek

Tulajdonságok a Flex Konténerben¶

flex-direction: Meghatározza az elemek fő tengelyének irányát.
- row (alapértelmezett): Sorba rendezés.
- row-reverse: Sorba rendezés fordított irányban.
- column: Oszlopba rendezés.
- column-reverse: Oszlopba rendezés fordított irányban.
flex-wrap: Meghatározza, hogy az elemeknek be kell-e törniük egy új sorba/oszlopba, ha nem férnek el.
- nowrap (alapértelmezett): Nem törik új sorba.
- wrap: Új sorba törik.
- wrap-reverse: Új sorba törik fordított irányban.
justify-content: Igazítja az elemeket a fő tengely mentén.
- flex-start (alapértelmezett): Balra igazítás (sor) vagy felülre igazítás (oszlop).
- flex-end: Jobbra igazítás (sor) vagy alulra igazítás (oszlop).
- center: Középre igazítás.
- space-between: Egyenlő távolságra az elemek között.
- space-around: Egyenlő távolságra az elemek között, a széleken is térközzel.
- space-evenly: Egyenlő távolságra az elemek között, illetve a konténer szélétől.
align-items: Igazítja az elemeket a kereszt tengely mentén.
- stretch (alapértelmezett): Betöltik a konténer teljes magasságát.
- flex-start: Kezdőponthoz igazítás.
- flex-end: Végponthoz igazítás.
- center: Kereszt tengely középpontjához igazítás.
- baseline: Az elemek alapvonalához igazítás.
align-content: Igazítja a sorokat, ha több sor van és a flex-wrap be van kapcsolva.
- stretch (alapértelmezett): A sorok kitöltik a rendelkezésre álló helyet.
- flex-start: Sorok igazítása a konténer kezdőpontjához.
- flex-end: Sorok igazítása a konténer végpontjához.
- center: Sorok középre igazítása.
- space-between: Sorok egyenletes elosztása térközzel közöttük.
- space-around: Sorok egyenletes elosztása térközzel közöttük és a széleken.

Példa: flex konténer gyerekekkel

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Konténer Példa</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background-color: lightgrey;
            height: 100vh;
        }

        .flex-container > div {
            background-color: dodgerblue;
            color: white;
            margin: 10px;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

A fenti példában a flex konténer a flex-direction: row;, a justify-content: space-between; és az align-items: center; beállításokkal bír. Ez azt jelenti, hogy a gyermekelemek egy sorba rendeződnek, egyenlő távolságra helyezkednek el egymástól, középre igazítva a kereszt tengely mentén. A konténer teljes magassága meg van határozva (100vh), így az elemek középen helyezkednek el a rendelkezésre álló térben.

Flexbox elemek¶

A Flexbox elemek tulajdonságai statikusan elhelyezett elemeket változtatnak rugalmas elemekké, amivel azok szabadabban és képlékenyebben helyezkednek el a flex konténerben.

order: Meghatározza a flex elemek rendjét.
- Alapértelmezett értéke: 0. Az elemek növekvő sorrendben lesznek elhelyezve az order értékük alapján.
flex-grow: Meghatározza, hogy az elem mennyire nőhet a rendelkezésre álló helyen belül.
- Alapértelmezett értéke: 0. Az elem nem fog nőni.
flex-shrink: Meghatározza, hogy az elem mennyire zsugorodhat a rendelkezésre álló helyen belül.
- Alapértelmezett értéke: 1. Az elem zsugorodhat.
flex-basis: Meghatározza az elem alapméretét a növekedés és zsugorodás előtt. Flex használata esetén a width és a height helyett ezen tulajdonság használata javasolt.
- Alapértelmezett értéke: auto.
flex: A fenti három tulajdonság összevonására szolgál. flex: 1 0 200px esetén a flex-grow 1, a flex-shrink 0, míg a flex-basis 200px lesz.
align-self: Felülírja az egyedi elemek align-items beállítását.
- Lehetséges értékei: auto, flex-start, flex-end, center, baseline, stretch.

Példa: flex-grow használata

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Elemek Példa</title>
    <style>
        .flex-container {
            display: flex;
            background-color: lightgrey;
        }

        .flex-container > div {
            background-color: dodgerblue;
            color: white;
            margin: 10px;
            padding: 20px;
            flex-grow: 1; /* Az elemek egyenlően nőnek */
        }

        .flex-container > div:first-child {
            flex-grow: 2; /* Az első elem kétszeresére nő */
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

A fenti példában három elem található a flex konténerben, mindegyik flex-grow: 1; beállítással, így egyenlően osztoznak a rendelkezésre álló helyen. Az első elemre alkalmaztuk a flex-grow: 2; beállítást, ami miatt az első elem kétszer nagyobb, mint a többi. Ez a példa megmutatja, hogy a Flexbox hogyan képes dinamikusan és rugalmasan kezelni az elosztási arányokat a gyermekelemek között.

Reszponzív Design Flexboxszal¶

A Flexbox jól illeszkedik a reszponzív design koncepciójához, mivel rugalmas elrendezéseket biztosít különböző képernyőméretekre. A média query-k kombinálásával könnyedén létrehozhatunk reszponzív elrendezéseket.

Példa: flexbox használata reszponzív design megvalósítására

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reszponzív Flexbox Példa</title>
    <style>
        .flex-container {
            display: flex;
            background-color: lightgrey;
            flex-wrap: wrap;
        }

        .flex-container > div {
            background-color: dodgerblue;
            color: white;
            margin: 10px;
            padding: 20px;
            flex: 1 1 200px; /* Az elemek egyenlően oszlanak el és legalább 200px szélesek */
        }

        @media only screen and (max-width: 768px) {
            .flex-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

Ez a példa bemutatja, hogyan használhatjuk a Flexboxot reszponzív design létrehozására. A flex konténer flex-wrap: wrap; beállításával a gyermekelemek több sorba törhetnek, ha nem férnek el egy sorban. A gyermekelemek minimum szélessége 200 pixel, és egyenlően oszlanak el a konténerben (flex: 1 1 200px;). Az @media query segítségével a konténer elrendezése oszloposra vált, ha a képernyő szélessége 768 pixel alá esik, így biztosítva a tartalom megfelelő megjelenését kisebb képernyőkön is.

Forrás, egyéb érdekességek¶

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Utolsó frissítés: 2024-08-16 16:51:30