, чтобы сохранить свой прогресс
Используйте свойство flex-wrap для обертывания строки или столбца
CSS flexbox имеет функцию разделения гибкого элемента на несколько строк (или столбцов). По умолчанию контейнер flex будет соответствовать всем гибким элементам вместе. Например, строка будет находиться в одной строке. Однако, используя свойство flex-wrap , он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса:
-
nowrap: это значение по умолчанию и не переносит элементы. -
wrap: обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце. -
wrap-reverse: обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце.
В текущем макете слишком много ящиков для одной строки. Добавьте свойство flex-wrap в элемент #box-container и придайте ему значение wrap.
/**
* Your test output will go here.
*/