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 hodnotudisplay
naflex
.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 smereflex-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 kflex-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 je0
, č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 je1
, č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 kflex-direction
). Môže mať rovnaké hodnoty akoalign-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
aflex-wrap
. Môže byť nastavený ako kombinácia hodnôt pre obidve vlastnosti oddelené medzerou, napríkladrow nowrap
.flex
: Skrýva kombináciu vlastnostíflex-grow
,flex-shrink
aflex-basis
do jednej vlastnosti. Môže byť nastavený ako hodnotanone
,auto
, jednoduché číslo alebo tri hodnoty oddelené medzerou, napríklad1 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.