Martin Michálek Martin Michálek  – 10. 2. 2021

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

CSS vlastnost flex-flow

flex-flow je jedna z vlastností flexboxu.

Jde o zkratku pro dvě už dříve uváděné vlastnosti:

  • 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řitom 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 pihou krásy je kombinace hodnot display:inline-flexflex-flow: column wrap, nepříliš známá a nepříliš omezující chyba, kterou jsme se zabývali už u vlastnosti flex-direction.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?