Vlastnost flex-direction
se aplikuje na kontejner flexboxu a určí způsob vyskládání položek tím, že nastaví směr hlavní osy flexboxu.
flex-direction
je jedna z vlastností flexboxu.
Toto jsou možné hodnoty:
row
(Výchozí hodnota.) Vyskládá flex položky do řádky.row-reverse
Do řádky, ale v opačném směru, tedy zprava doleva.column
Položky flexboxu se skládají shora dolů, do sloupce.column-reverse
Do sloupce, ale v opačném směru, tedy zdola nahoru.

Jakým směrem se flexboxové rozvržení vykreslí?
V živé ukázce je možné interaktivě zkoušet všechny varianty hodnot vlastnosti.
Zkratka flex-flow
Také u této vlastnosti můžete použít zkratku flex-flow
:
.box {
flex-flow: column; /* = flex-direction: column */
}
Záludnosti změny pořadí
Je potřeba říci, že směr layout ve flexboxu vždy vychází ze zvyklostí daného jazyka – u nás tedy zleva doprava, v japonštině shora dolů. Jak jsem psal jinde, záleží to také na nastavení vlastností writing-mode
a direction
.
O směru psaní dokumentu a tvorbě layoutu pro jazyky sázené v jiných směrech píšu více v textu o logických vlastnostech a hodnotách v CSS.
Pořadí vykreslení položek se v případě vlastností row
a column
bere z pořadí v kódu. Pokud chcete pořadí otočit, prostě zvolte hodnoty row-reverse
nebo column-reverse
. Pozorní si asi všimli, že vlastnost flex-direction
lze tím pádem použít i pro změnu řazení seznamů.
Změna pořadí má ale vliv jen na výsledek vykreslení, nikoliv např. na pořadí vykreslování a na procházení při navigaci klávesou Tab
nebo čtečkami pro slabozraké.
Proto si na změnu směru dávejte velký pozor a vždy si představte, zda „čtení“ dokumentu bude dávat smysl i při pořadí uvedeném v DOMu. Je to ostatně podobné jako u vlastnosti order
a více to rozebírám v textu CSS layout a přístupnost.
Vliv na flex-basis
Pokud je flex-direction
nastaveno na hodnotu column
, vlastností flex-basis
nastavujete výšku, tedy vlastnost height
, nikoliv šířku a tedy width
.
Podpora v prohlížečích
Vlastnost flex-direction
funguje to dobře. Jedinou mě známou výjimkou je flexbug číslo 14, kdy při použití display:inline-flex
a flex-flow:column wrap
prohlížeče neumí správně roztáhnout kontejner do celé šířky položek. Ale to je drobnost, na kterou často lidé ani nenarazí. Více o tom píšu v textu o chybách v CSS layoutech.
Více o podpoře je na CanIUse.com.
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: