Táto flex-wrapvlastnosť je podvlastnosťou modulu Flexibilné usporiadanie schránky.
Definuje, či sú položky flexa vynútené v jednom riadku alebo či je možné ich pretiecť do viacerých riadkov. Ak je nastavené na viac riadkov, definuje tiež priečnu os, ktorá určuje smer, do ktorého sú nové čiary ukladané.
Pripomienka: os kríža je osou kolmou na hlavnú os. Jeho smer závisí od smeru hlavnej osi.
Toto flex-wrapubytovacie zariadenie akceptuje 3 rôzne hodnoty:
nowrap( predvolené ): jednoriadkový, ktorý môže spôsobiť pretečenie kontajnerawrap: viacriadkové, smer je definovanýflex-directionwrap-reverse: viacriadkové, oproti smeru definovanému znakomflex-direction
Syntax
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Ukážka
V nasledujúcej ukážke:
- Červený zoznam je nastavený na
nowrap - Žltý zoznam je nastavený na
wrap - Modrý zoznam je nastavený na
wrap-reverse
Poznámka: flex-directionje nastavená na predvolenú hodnotu: row.
Pozrite si ukážku Flex Flex-wrap: ukážka od CSS-Tricks (@ css-tricks) na stránkach CodePen.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Viac informácií o tom, ako kombinovať syntaxe s cieľom získať najlepšiu podporu prehľadávača, nájdete v tomto článku (CSS-triky) alebo v tomto článku (DevOpera).