Prehľad základnej teórie FLEX BOXu

Flexbox (flexible box) je technológia v CSS, ktorá umožňuje flexibilné usporiadanie elementov v jednoduchom, no výkonným spôsobe. Flexbox je ideálny pre vytváranie responzívnych rozložení, kde sa elementy prispôsobujú veľkosti obrazovky a zariadenia.

Flexbox kontajner obsahuje jednu alebo viacero flexbox elementov. Každý flexbox element môže byť umiestnený do flexbox kontajnera. Flexbox kontajner definuje základné vlastnosti usporiadania elementov. Vlastnosti, ktoré sa používajú na flexbox kontajner sú display, flex-direction, justify-content, align-items a flex-wrap.

• display: Nastavuje typ kontajnera ako flexbox. Ak chcete použiť flexbox, nastavte hodnotu display na flex.
• flex-direction: Nastavuje smer usporiadania flexbox elementov v kontajneri. Môže byť riadkový (row), riadkový opačný (row-reverse), stĺpcový (column) alebo stĺpcový opačný (column-reverse).
• justify-content: Nastavuje zarovnávanie flexbox elementov v kontajneri pozdĺž hlavného osi (v smere flex-direction). Môže byť zarovnaný na začiatok (flex-start), na koniec (flex-end), na stred (center), rovnomerne rozložený (space-between) alebo rovnomerne rozložený s medzerami (space-around).
• align-items: Nastavuje zarovnávanie flexbox elementov v kontajneri pozdĺž vedľajšej osi (v smere opačnom k flex-direction). Môže byť zarovnaný na začiatok (flex-start), na koniec (flex-end), na stred (center), zarovnaný na celú výšku (stretch) alebo zarovnaný podľa zvyšných voľných priestorov (baseline).
• flex-wrap: Nastavuje zalamovanie flexbox elementov do viacerých riadkov alebo stĺpcov. Môže byť zapnutý (wrap) alebo vypnutý (nowrap).

Flexbox elementy môžu mať svoje vlastné vlastnosti ako flex-grow, flex-shrink a flex-basis.

• flex-grow: Určuje, ako sa má flexbox element zväčšovať, ak sú k dispozícii dodatočné voľné miesta v kontajneri. Výchozia hodnota je 0, čo znamená, že sa element nebude zväčšovať.
• flex-shrink: Určuje, ako sa má flexbox element zmenšovať, ak nie je dostatok miesta v kontajneri. Výchozia hodnota je 1, čo znamená, že sa element bude zmenšovať v pomere s ostatnými elementmi, ak nie je dostatok miesta.
• flex-basis: Určuje počiatočnú veľkosť flexbox elementu predtým, ako je aplikované zväčšovanie alebo zmenšovanie. Môže byť určený ako percento, pixel alebo absolútna hodnota.

Okrem toho, flexbox umožňuje aj ďalšie vlastnosti ako order, align-self, flex-flow a flex.

• order: Určuje poradie, v ktorom sa majú flexbox elementy zobraziť v kontajneri. Vyššia hodnota znamená, že sa element zobrazí neskôr.
• align-self: Určuje zarovnanie konkrétneho flexbox elementu v kontajneri pozdĺž vedľajšej osi (v smere opačnom k flex-direction). Môže mať rovnaké hodnoty ako align-items, ale tieto hodnoty sa aplikujú len na daný element a neovplyvňujú ostatné elementy v kontajneri.
• flex-flow: Zjednodušená zápis vlastností flex-direction a flex-wrap. Môže byť nastavený ako kombinácia hodnôt pre obidve vlastnosti oddelené medzerou, napríklad row nowrap.
• flex: Skrýva kombináciu vlastností flex-grow, flex-shrink a flex-basis do jednej vlastnosti. Môže byť nastavený ako hodnota none, auto, jednoduché číslo alebo tri hodnoty oddelené medzerou, napríklad 1 1 auto.

Flexbox kontajner a flexbox elementy môžu byť umiestnené v rámci iného kontajnera. V tomto prípade sa aplikujú vlastnosti pre flexbox na vnútorný kontajner a jeho flexbox elementy. Toto sa nazýva „vnořený flexbox“.

Flexbox je užitočný pre rôzne typy rozložení, vrátane základných riadkových a stĺpcových rozložení, rovnovážnych rozložení s pružnosťou, centrovania, zarovnávania a mnoho ďalších. S použitím flexboxu môžete vytvárať responzívne rozloženia, ktoré sa prispôsobujú rôznym veľkostiam zariadení a obrazoviek.