Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [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.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

Пример

mangohost