При использовании флекс-контейнера элементы стараются вместиться в него без переноса строки. При этом элементы внутри контейнера ведут себя примерно как строчные элементы — занимают только то пространство, которое им необходимо.
Что же произойдет, если элементам внутри контейнера не хватит места? По логике контейнера элементы обязаны располагаться в одну строку, если не указано другое. Поэтому элементы внутри просто начнут выходить за пределы контейнера, но останутся в одной строке. Это может быть немного неочевидно, но такое поведение частенько помогает сверстать макет, например, эта особенность пригодится при верстке слайдеров.
Добавим отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство flex-wrap, которое говорит контейнеру переносить дочерние элементы при нехватке места.
Свойство flex-wrap может принимать одно из трех значений:
- nowrap. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.
- wrap. Данное значение говорит перенести элементы внутри контейнера при нехватке места.
- wrap-reverse. То же самое, что и wrap, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями 1 и 2 окажется ниже, в отличие от ситуации с использованием простого wrap
Использование flex-wrap — отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.
Документация
- flex-wrap
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
