Релевантные источники: - developer.mozilla.org -> [flex-wrap](https://developer.mozilla.org/ru/docs/Web/CSS/flex-wrap) > Данное свойство прописывается [[flex container и flex items|flex-контейнеру]] `flex-wrap` — это CSS-свойство, которое задаёт правила вывода [[flex container и flex items|flex-элементов]] — в одну строку (ряд) или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки. ### Значения свойства 1. **nowrap**: (по умолчанию) Элементы flex-контейнера располагаются в одну строку (ряд). Если их суммарная ширина превышает ширину контейнера, они не переносятся на новую строку и могут выходить за его пределы. 2. **wrap**: Элементы flex-контейнера переносятся на новую строку, если они не помещаются в контейнер по ширине. Новые строки добавляются ниже предыдущих. 3. **wrap-reverse**: Элементы flex-контейнера также переносятся на новую строку, если не помещаются в контейнер, но новые строки добавляются выше предыдущих, то есть в обратном порядке. ### Синтаксис ```css .parent { flex-wrap: wrap; } ``` ### Интерактивная визуализация <iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/flex-wrap.html" width="100%" height="380"></iframe>