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.
Погледајте Пен Флек-врап: демо од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
За више информација о томе како мешати синтаксе како бисте добили најбољу подршку за прегледач, погледајте овај чланак (ЦСС-трикови) или овај чланак (ДевОпера).