Как перенести flex элемент на новую строку

Перенос элементов в контейнере — CSS: Основы Flex

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

Что же произойдет, если элементам внутри контейнера не хватит места? По логике контейнера элементы обязаны располагаться в одну строку, если не указано другое. Поэтому элементы внутри просто начнут выходить за пределы контейнера, но останутся в одной строке. Это может быть немного неочевидно, но такое поведение частенько помогает сверстать макет, например, эта особенность пригодится при верстке слайдеров.

Добавим отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство flex-wrap, которое говорит контейнеру переносить дочерние элементы при нехватке места.

Свойство flex-wrap может принимать одно из трех значений:

nowrap. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.
wrap. Данное значение говорит перенести элементы внутри контейнера при нехватке места.

wrap-reverse. То же самое, что и wrap, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями 1 и 2 окажется ниже, в отличие от ситуации с использованием простого wrap

Использование flex-wrap — отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях:

Как принудительно перенести flex элемент на новую строку?

Есть flex контейнер с flex-wrap: wrap. Необходимо перенести определённый элемент внутри этого контейнера на новую строку, независимо от того помещается он там или нет. Никаких конкретных размеров не известно, соседние элементы могут иметь произвольную ширину. Так же нужно чтобы после этого элемента, который мы перенесём могли идти следующие элементы, то есть чтобы этот элемент не занимал всю новую строку.

Вопрос задан более трёх лет назад
14742 просмотра

1 комментарий

Средний 1 комментарий

Flexbox item — перенос на новую строку

Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока с display: flex .

Наиболее простое и надёжное решение — это вставка flex-элементов в правильных местах. Если они достаточно широкие ( width: 100% ), они будут создавать перенос строки.

.container < background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; >.item < width: 100px; background: gold; height: 100px; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px >.item:nth-child(4n - 1) < background: silver; >.line-break

Но это уродливо и не семантически. Вместо этого, мы можем генерировать псевдоэлементы внутры flex-контейнера и использовать свойство order чтобы перемещать их в нужные места.

.container < background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; >.item < width: 100px; background: gold; height: 100px; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px >.item:nth-child(3n) < background: silver; >.container::before, .container::after < content: ''; width: 100%; order: 1; >.item:nth-child(n + 4) < order: 1; >.item:nth-child(n + 7)

Но есть ограничение: flex-контейнер может иметь только псевдоэлементы ::before и ::after . Это значит, что мы можем создать только 2 переноса строки.

Чтобы разрешить это, вы можете генерировать псевдоэлементы внутри flex-элементов вместо flex-контейнера. Таким способом вы не будете ограничены двумя. Но эти псевдоэлементы не будут flex-элементами, поэтому не будут создавать переносы строк.

Но, к счастью, спецификация CSS Display L3 ввела display: contents (в данный момент поддерживаемая только Firefox 37):

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

Поэтому вы можете применять display: contents к детям flex-контейнера и обернуть содержимое каждого внутрь дополнительного блок. Таким образом flex-элементы будут этими дополнительными обёртками и псевдоэлементами детей.

.container < background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; >.item < display: contents; >.item > div < width: 100px; background: gold; height: 100px; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; >.item:nth-child(3n) > div < background: silver; >.item:nth-child(3n)::after

Кроме того, в соответствии с Fragmenting Flex Layout и CSS Fragmentation, flexbox позволяет принудительные переносы с помощью break-before , break-after или их псевдонимов в CSS 2.1:

.item:nth-child(3n) < page-break-after: always; /* Синтаксис CSS 2.1 */ break-after: always; /* Новый синтаксис */ >

.container < background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; >.item < width: 100px; background: gold; height: 100px; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px >.item:nth-child(3n)

Принудительные переносы строк во flexbox ещё широко не поддерживаются, но они работают в Firefox.

Свойство flex-wrap, перенос flex-элементов

Что будет, если флекс-элементов в контейнере станет больше, чем может уместиться в один ряд?

Они будут сжиматься до минимально возможной ширины.
Даже если им задать ширину явно, механизм флексбокса может её уменьшить.
Если они перестанут помещаться в контейнер и после уменьшения, то они выйдут за его пределы, но продолжат располагаться в один ряд.

Это чем-то похоже на поведение ячеек в таблице.

Такое поведение можно изменить свойством флекс-контейнера flex-wrap . По умолчанию оно имеет значение nowrap , то есть перенос флекс-элементов на новую строку запрещён.

Вся теория и выполнение задания доступны по подписке

Подписка — это:

После подписки вы получите доступ:

теория тренажёров без ограничений;
доступ ко всем платным тренажёрам;
интересные и сложные вызовы для практики;
безлимитные проверки испытаний.

Бесплатные материалы:

Конспект части «Флексбокс. Знакомство»
Статья «Примеры использования флексбоксов»
Видео «Кому нужны флексы»