В flex-wrapимота е под-собственост на модула гъвкави полета Разпределение на.
Той определя дали флекс елементите са принудени в един ред или могат да бъдат прехвърлени в множество редове. Ако е зададен на множество линии, той също така определя напречната ос, която определя посоката, в която са подредени новите линии.
Напомняне: напречната ос е оста, перпендикулярна на главната ос. Посоката му зависи от посоката на главната ос.
В flex-wrapимота приема 3 различни стойности:
nowrap( по подразбиране ): едноредов, който може да доведе до препълване на контейнераwrap: многоредови, посоката се определя отflex-directionwrap-reverse: многоредови линии, противоположни на посоката, дефинирана отflex-direction
Синтаксис
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Демонстрация
В следната демонстрация:
- Червеният списък е настроен на
nowrap - Жълтият списък е настроен на
wrap - Синият списък е настроен на
wrap-reverse
Забележка: flex-direction, е определен на стойността по подразбиране: row.
Вижте Pen Flex-wrap: demo от CSS-Tricks (@ css-tricks) на CodePen.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 21 * | 28 | 11. | 12 | 6,1 * |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
За повече информация как да смесвате синтаксиси, за да получите най-добрата поддръжка на браузъра, моля, вижте тази статия (CSS-трикове) или тази статия (DevOpera).