CSS vlastnost flex-wrap: zalamování položek flexboxu

Vlastnost flex-wrap aplikujeme na kontejner flexboxu, abychom definovali, zda se položky rozvržení mohou zalamovat na více řádků nebo nikoliv. Hodnotou wrap-reverse také můžeme otočit pořadí vyskládání prvků na příčné ose layoutu.

Toto jsou možné hodnoty:

• nowrap
  Výchozí hodnota. Flexbox bude jednořádkový.
• wrap
  Kontejner flexboxu umožní položkám, aby se zalomily na další řádek.
• wrap-reverse
  Položky se mohou zalomit do více řádků a zároveň se pořadí řádků otočí.

Dva příklady

V obou demech máme jednoduché HTML…

<div class="container">
  <p>
    <strong>Item 1</strong> …
  </p>
  <p>
    <strong>Item 2</strong> …
  </p>
  <p>
    <strong>Item 3</strong> …
  </p>  
</div>

…a ještě jednodušší základní CSS:

.container {
  display: flex;
  flex-wrap: nowrap; /* nebo wrap, wrap-reverse */
}

Ve výsledku si můžete proklikávat jednotlivé hodnoty vlastnosti flex-wrap:

Připravil jsem ještě jedno demo, ve kterém jsou položky flexboxu obsahově velmi stručné a je jich daleko více, aby bylo vidět, že jde o nepovinné zalamování.

I po nastavení hodnoty na wrap nebo wrap-reverse prohlížeč uvažuje, zda vůbec zalamovat potřebuje. Je to asi jako když vypisujete text do řádku.

Všimněte si také prosím chování hodnoty wrap-reverse – položky se vyskládají dle očekávání zdola, ale zleva doprava, nikoliv naopak, jak by mohl někdo očekávat.

Dává to ale smysl. Hodnota wrap-reverse totiž zalamuje naopak. Poslední položka řádku skočí nahoru a zařadí se nad první položku.

Zkratka flex-flow

Možná už víte, že můžete použít vlastnost flex-flow, zkratku pro vlastnosti flex-direction a flex-wrap.

flex-flow: wrap = flex-wrap: wrap

Podpora v prohlížečích

Podpora je velmi dobrá a o chybách nevím. Na CanIUse se u Internet Exploreru 11 v době psaní uvádí částečná podpora s poznámkou, že to je kvůli velkému počtu chyb. Trošku horší je, že už nejsou uvedeny. Pokud o zdokumentovaných chybách víte, napište mi je, rád je doplním. CanIUse.com