Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

flex-wrap

CSSflex-wrap
mangohost

Свойство flex-wrap - определяет то как элементы будут расположены на уровне строк, должны ли они принудительно занимать всего одну строку или могут быть расположены на нескольких строках. 

Общие сведения

Если указано значение разрешающие размещение элементов на нескольких строках, то также определяется поперечная ось, которая задаёт направление для расположения новых строк.

Поперечная ось - это ось перпендикулярная основной оси и её направление зависит от направления основной оси.

Синтаксис свойства

  • Синтаксис:
    flex-wrap: nowrap | wrap | wrap-reverse
  • Значение по умолчанию: nowrap
  • Применяется: к Flex-контейнеру
  • Наследуется: нет
  • Анимируется: нет

Значения свойства

  • nowrap - одна строка, которая может привести к переполнению Flex-контейнера.
  • wrap - несколько строк, направление определяется с помощью свойства flex-direction.
  • wrap-reverse - несколько строк, направление обратное направлению определённому с помощью свойства flex-direction.

Поддержка браузерами

CSS Flexible Box Layout Module

IE
9
0.06%
10
0%
11
0.5%
Edge
121
0.2%
122
3.96%
123
0.31%
Firefox
122
0.06%
123
1.09%
124
0.45%
125
0%
126
0%
Chrome
121
1.69%
122
12.58%
123
3.51%
124
0.02%
125
0%
Safari
17.2
0.28%
17.3
1.12%
17.4
0.22%
17.5
0%
TP
0%
Safari on iOS
17.2
0.61%
17.3
7.43%
17.4
1.09%
17.5
0%
Chrome for Android
123
42.29%

Пример

mangohost