Flexbox je výkonný CSS modul pro vytváření flexibilních a responzivních webových rozvržení. Poskytuje flexibilní způsob distribuce prostoru mezi položkami v kontejneru, bez ohledu na jejich velikost.
Níže je popsána část vlastností, které je možné nastavit containeru. Nejedná se o kompletní výčet, jde pouze o několik základních. Pro podrobnější a kompletní popis, jsou níže uvedeny odkazy na dokumentaci a několik stránek s praktickými ukázkami.
Základní vlastnost, kterou je potřeba nastavit je display: flex. Tímto budou všechny položky uvnitř containeru zarovnávány do řady (samozřejmě směr a pořadí je možné měnit).
https://codepen.io/ViktorVrablik/pen/BaMbXdJ
Vlastnost flex-direction umožňuje měnit pořadí a směr řazení jednotlivých prvků. Základní nastavení odpovídá hodnotě row.
flex-direction: row | row-reverse | column | column-reverse;
https://codepen.io/ViktorVrablik/pen/LYqawQN