CSS flex-wrap

   CSS свойство flex-wrap определяет будут ли flex-элементы выстраиваться в одну строку или многострочно.

   Если многострочное расположение разрешено, то свойство позволяет задавать направление расположения flex-элементов.

Синтаксис:

   в CSS:

flex-wrap: "nowrap | wrap | wrap-reverse | initial | inherit";

   в JavaScript:

object.style.flexWrap = "wrap"

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

nowrap

   Указывает, что флекс элементы выстраиваются в одну строку (является значением по умолчанию).

wrap

   Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов в случае переполнения. Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr), а при значении rtl размещаются справа налево.

wrap-reverse

   Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов в случае переполнения, по аналогии со значением wrap, однако формирование строк идёт в обратном порядке.

initial

   Устанавливает свойство в значение по умолчанию.

inherit

   Указывает, что значение наследуется от родительского элемента.

 

Ресурсы для более глубокого изучения вопроса:

https://developer.mozilla.org/ru/docs/Web/CSS/flex-wrap#html

https://basicweb.ru/css/css_pr_flex-wrap.php