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

Vlastnost flex-wrap aplikujeme na kontejner flexboxu, abychom definovali, zda se položky rozvržení mohou zalamovat na více řádků nebo nikoliv.

CSS vlastnost flex-wrap

flex-wrap je jedna z vlastností flexboxu.

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čí.
CSS vlastnost flex-wrap

Může se layout zalamovat, a pokud ano jakým směrem?

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 */
}

V online ukázce si můžete interaktivně vyzkoušet 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.

Nezalamuje wrap-reverse naopak?

Všimněte si 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 právě flex-wrap.

.box {
  flex-flow: wrap; /* = flex-wrap: wrap */
}

Podpora v prohlížečích

Podpora je velmi dobrá a o chybách nevím. Na webu 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 a dle mého neexistují. CanIUse.com

Komentujte

Našli jste chybu? Chcete doplnit svůj pohled?

Pište: [email protected]