Flex-wrap - Triky CSS

Tato flex-wrapvlastnost je dílčí vlastností modulu Flexibilní rozvržení krabice.

Definuje, zda jsou položky flexu vynuceny v jednom řádku nebo zda mohou být převedeny do více řádků. Pokud je nastaveno na více řádků, definuje také příčnou osu, která určuje směr, ve kterém jsou nové řádky skládány.

Připomenutí: příčná osa je osa kolmá k hlavní ose. Jeho směr závisí na směru hlavní osy.

Ubytovací zařízení flex-wrappřijímá 3 různé hodnoty:

• nowrap( výchozí ): jednořádkový, který může způsobit přetečení kontejneru
• wrap: víceřádkový, směr je definován flex-direction
• wrap-reverse: víceřádkové, opačné ke směru definovanému flex-direction

Syntax

flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )

Ukázka

V následující ukázce:

• Červený seznam je nastaven na nowrap
• Žlutý seznam je nastaven na wrap
• Modrý seznam je nastaven na wrap-reverse

Poznámka: flex-directionje nastavena na výchozí hodnotu: row.

Podívejte se na ukázku Pen Flex-wrap: demo od CSS-Tricks (@ css-tricks) na CodePen.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
21 *	28	11	12	6,1 *

Mobilní / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	4.4	7,0-7,1 *

Další informace o tom, jak kombinovat syntaxe s cílem získat nejlepší podporu prohlížeče, najdete v tomto článku (CSS-Tricks) nebo v tomto článku (DevOpera).