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

Vlastnost flex-flow je zkratkou pro dvě jiné:

  • flex-direction – určuje směr vykreslování flexboxového rozvržení.
  • flex-wrap – definuje, zda se budou položky zalamovat na více řádků layoutu.

Související

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 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 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?