---
id: 587d78ad367417b2b2512afa
title: Use the flex-wrap Property to Wrap a Row or Column
challengeType: 0
videoUrl: ''
localeTitle: Используйте свойство flex-wrap для обертывания строки или столбца
---
## Description
CSS flexbox имеет функцию разделения гибкого элемента на несколько строк (или столбцов). По умолчанию контейнер flex будет соответствовать всем гибким элементам вместе. Например, строка будет находиться в одной строке. Однако, используя свойство flex-wrap
, он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса: -
nowrap
: это значение по умолчанию и не переносит элементы. -
wrap
: обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце. -
wrap-reverse
: обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце.
## Instructions
В текущем макете слишком много ящиков для одной строки. Добавьте свойство flex-wrap
в элемент #box-container
и придайте ему значение wrap.
## Tests
```yml
tests:
- text: 'Элемент #box-container
должен иметь свойство flex-wrap
установленное на значение wrap.'
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The #box-container
element should have the flex-wrap
property set to a value of wrap.");'
```
## Challenge Seed
## Solution
```js
// solution required
```