CSS vlastnost flex-flow: zkratka pro určení směru a zalamování flexboxu

Vlastnost flex-flow určuje směr a způsob zalamování položek flexboxu.

Jde o zkratku pro dvě vlastnosti, které jsme uváděli již dříve:

• flex-direction – směr vykreslování flexboxového rozvržení.
• flex-wrap – zalamování položek layoutu na více řádků.

V obecné rovině je zápis následující:

flex-flow: <hodnota flex-direction> <hodnota flex-wrap>;

Vzhledem k tomu, že obě vlastnosti používají jiná klíčová slova pro své hodnoty, je možné je uvádět v libovolném pořadí a samozřejmě úplně v klidu jednu z nich vynechat.

Níže to v textu rozebereme více, ale obrázky napoví. Jako vždy. Nejprve k flex-direction.

A co vlastnost flex-wrap? Tramtadadá, tady ji máme!

Toto jsou příklady možných hodnot:

• column
  Jako flex-direction:column. Položky flexboxu se skládají do sloupce.
• wrap
  Odpovídá flex-wrap:wrap. Kontejner flexboxu umožní položkám, aby se zalomily na další řádek.
• column wrap
  Ekvivalentní k flex-direction:column;flex-wrap:wrap.
• row-reverse wrap
  Ekvivalentní k flex-direction:row-reverse;flex-wrap:wrap.

Všechno je to dobře vidět v online ukázce na CodePenu, kde si také můžete měnit velikost písma, šířku viewportu nebo to jinak rozbíjet a při tom se to všechno naučit.

Podpora v prohlížečích

Podpora vlastnosti flex-flow je přímo luxusní. Podívejte se na CanIUse a uvidíte samá zelená políčka, včetně Internet Exploreru. CanIUse.com

Jedinou vadou na kráse je kombinace hodnot display:inline-flex a flex-flow:column wrap, nepříliš známá a nepříliš omezující chyba, kterou jsme se zabývali už u vlastnosti flex-direction.