Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу 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.2%
10
0.06%
11
2.26%
Edge
16
0.12%
17
1.52%
18
0%
Firefox
63
0.05%
64
0.51%
65
2.59%
66
0.08%
67
0%
Chrome
70
0.38%
71
11.67%
72
15%
73
0.05%
74
0.02%
Safari
11
0.09%
11.1
0.33%
12
1.81%
12.1
0.01%
TP
0%
iOS Safari
11.0-11.2
0.4%
11.3-11.4
0.96%
12.0-12.1
8.47%
12.2
0.04%
Chrome for Android
71
33.46%

Пример