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

flex-wrap

CSS flex-wrap

Свойство 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.13%
10
0.1%
11
2.71%
Edge
15
0.08%
16
1.28%
17
0.36%
18
0%
Firefox
58
0.07%
59
1.98%
60
1.64%
61
0.07%
62
0%
Chrome
64
0.34%
65
1.92%
66
23.09%
67
0.19%
68
0.04%
Safari
10.1
0.27%
11
0.39%
11.1
1.3%
12
0%
TP
0%
iOS Safari
10.3
0.72%
11.0-11.2
2.13%
11.3
5.99%
Chrome for Android
66
30.44%

Пример