Flex как перенести блок на новую строку

Включаем Flexbox

Устанавливает отображение flexbox для дочерних элементов.

display: flex ;

flex-direction

Определяет направление, в котором расположатся дочерние элементы (в вертикальном или горизонтальном). Префикс -reverse меняет порядок расположения элементов на обратный.

row(по умолчанию) слева направо
row-reverse справа налево
column сверху вниз
column-reverse снизу вверх

flex-direction: row | row-reverse | column | row | column-reverse ;

justify-content

Устанавливает выравнивание дочерних элементов по горизонтали (если flex-direction: row) или вертикали (если flex-direction: column).

flex-start(по умолчанию) выравнивание по левому краю
flex-end по правому краю
center по середине
space-between расширяет пространство между элементами так, чтобы первый элемент касался левого края, а последний – правого
space-around расстояние между элементами одинаково, а расстояние между крайними элементами и границами родителя равно половине расстояния между элементами
space-evenly расстояния между элементами и границами родителя равны

align-items

Устанавливает выравнивание дочерних элементов по вертикали (если flex-direction: row) или по горизонтали (если flex-direction: column).

stretch(по умолчанию) растянуть элементы так, чтобы заполнить родительский блок
flex-start выравнивание по верхнему краю
flex-end по нижнему краю
center по центру
baseline по первой строке текста

align-items: stretch | flex-start | flex-end | center | baseline ;

flex-wrap

Разрешает перенос элементов на новую строку. По умолчанию перенос запрещён.

nowrap(по умолчанию) все элементы выстроены одной строкой
wrap элементы могут переноситься на следующую строку
wrap-reverse строки расположены в обратном порядке

flex-wrap: nowrap | wrap | wrap-reverse ;

flex-flow

Сокращённая запись двух свойств flex-direction и flex-wrap. По умолчанию row nowrap

align-content

Если дочерние элементы flexbox не помещаются в ширину блока и разрешён перенос элементов на новую строку (flex-wrap: wrap), то при помощи align-content можно настроить выравнивание этих строк.

Выравнивание может выполняться относительно горизонтали или вертикали в зависимости от значения свойства flex-direction.

stretch(по умолчанию) растягивает высоту строк настолько, чтобы заполнить блок
flex-start выравнивание относительно начала блока
flex-end относительно конца
center относительно центра
space-between первая строка в начале блока, последняя в конце. Расстояние между всеми строками равно
space-around аналогично space-between, но расстояние между первой строкой и началом блока и последней строкой и концом блока равно половине расстояния между строками

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

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

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

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

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

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

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

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

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

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

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

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

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 элемент на новую строку?

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

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

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

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