K čemu slouží CSS Flexbox?
CSS Flexible Box Layout (známý jednoduše jako Flexbox) je moderní modul pro rozvržení stránky, který byl navržen tak, aby poskytoval efektivní způsob, jak zarovnávat a distribuovat prostor mezi položkami v kontejneru. A to i v případě, že jejich velikost není předem známa nebo je dynamická.
Nejdůležitější vlastnosti kontejneru
justify-content: Definuje zarovnání prvků podél hlavní osy (např. horizontálně, pokud je směr `row`). Slouží k vycentrování obsahu nebo rovnoměrnému rozložení mezer.align-items: Definuje zarovnání prvků podél příčné osy (např. vertikálně). Nejčastěji se používá k přesnému vertikálnímu vycentrování prvků (spolu s justify-content: center).flex-wrap: Pokud je prvků moc a nevejdou se na jeden řádek, tato vlastnost určí, zda mají "přetéct" ven, nebo se mají zalomit na další řádek (skvělé pro responzivní design).gap: Moderní vlastnost, která určuje přesnou velikost mezery mezi prvky. Už žádné složité hrátky s marginy!
Flexbox vs. CSS Grid
Obě technologie se skvěle doplňují. Obecné pravidlo říká, že Flexbox je ideální pro jednorozměrná rozložení (tedy skládání prvků buď do řádku, nebo do sloupce, typicky navigační menu nebo karty produktů vedle sebe). CSS Grid je naproti tomu určen pro dvojrozměrná rozložení (složitější mřížky tvořené řádky i sloupci současně, typicky celkový layout webové stránky).