Как перенести элемент на следующую строку css
Перейти к содержимому

Как перенести элемент на следующую строку css

  • автор:

flex-wrap

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020 .

Свойство CSS flex-wrap задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

Интерактивный пример

Начальное значение nowrap
Применяется к flex-контейнеры
Наследуется нет
Обработка значения как указано
Animation type discrete

Подробнее о свойствах и дополнительную информацию смотрите Основные понятия Flexbox.

Синтаксис

flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Глобальные значения */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset; 

Свойство flex-wrap может содержать одно из следующих ниже значений.

Значения

Допускаются следующие значения:

Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction .

Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.

Ведёт себя так же, как и wrap , но cross-start и cross-end инвертированы.

Формальный синтаксис

flex-wrap =
nowrap | (en-US)
wrap | (en-US)
wrap-reverse

Примеры

HTML

h4>This is an example for flex-wrap:wraph4> div class="content"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:nowraph4> div class="content1"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:wrap-reverseh4> div class="content2"> div class="red">1div> div class="green">2div> div class="blue">3div> div> 

CSS

/* Common Styles */ .content, .content1, .content2  color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; > .content div, .content1 div, .content2 div  height: 50%; width: 50%; > .red  background: orangered; > .green  background: yellowgreen; > .blue  background: steelblue; > /* Flexbox Styles */ .content  display: flex; flex-wrap: wrap; > .content1  display: flex; flex-wrap: nowrap; > .content2  display: flex; flex-wrap: wrap-reverse; > 

Результат

Спецификации

Specification
CSS Flexible Box Layout Module Level 1
# flex-wrap-property

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
 
1
2
3
4
5
6
7
8
9
10

Но это уродливо и не семантически. Вместо этого, мы можем генерировать псевдоэлементы внутры 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)
 
1
2
3
4
5
6
7
8
9

Но есть ограничение: 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
 
1
2
3
4
5
6
7
8
9
10

Кроме того, в соответствии с 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)
 
1
2
3
4
5
6
7
8
9
10

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

Перенос строки CSS

normal текст переносится | пробелы не учитываются | Enter (разрыв строки) не учитывается pre-line текст переносится | пробелы не учитываются | Enter учитывается pre-wrap текст переносится | пробелы учитываются | Enter учитывается pre текст не переносится | пробелы учитываются | Enter учитывается nowrap текст не переносится | пробелы не учитываются | Enter не учитывается initial normal inherit наследует значение родителя unset наследует значение родителя

ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать

  
ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать

У тега по умолчанию white-space имеет значение pre .

  • в комментариях, которые заполняют посетители, далёкие от HTML. Абзацы разбиваются не тегом

    , а перевод строки обозначается не тегом
    , а символом , который печатает клавиша Enter .

  • для демонстрации HTML кода.
  • для оформления стихов.

Запретить перенос

Значения pre-wrap и pre-line поддерживаются Internet Explorer 8

Запрет переноса с помощью white-space: nowrap;

  Значения pre-wrap и pre-line поддерживаются Internet Explorer 8 

Запрет переноса с помощью неразрывного пробела   и/или неразрывного дефиса ‑

В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word; или word-wrap: break-word; или word-break: break-all; символы всё же в определённый момент переходят на следующую строчку.

Значения prewrap и preline поддерживаются Internet Explorer 8

Прокрутка при отключении автопереноса

Часто совместно со значениями pre или nowrap элементу меняется значение свойства overflow , чтобы добавить полосу прокрутки или обрезать выходящую за границу часть, дабы не появился горизонтальный скролл у всего сайта.

  overflow: visible; 
Значения pre-wrap и pre-line поддерживаются IE 8
overflow: hidden;
Значения pre-wrap и pre-line поддерживаются IE 8
overflow-x: scroll;
Значения pre-wrap и pre-line поддерживаются IE 8
overflow: auto;
Значения pre-wrap и pre-line поддерживаются IE 8

Разрыв строки

Тег

Элементы после тега
будут перенесены на следующую строку с любым значением свойства white‑space .

ноль один

три Enter пять шесть

 div 
ноль один <br> три Enter пять шесть

Блочный элемент

три Enter пять шесть

 #raz 
ноль один <div></div> три Enter пять шесть

Свойство white-space

 h1 < white-space: pre-line; > span 

Это должно быть сверху это под ним

Разрыв строки в псевдоэлементах ::before / ::after

  
Текст

У моноширинного шрифта все символы одной ширины, в том числе пробел

  
Дельфин из символов
  • Перенос слов CSS (свойство word-wrap и др.)
  • Красная строка CSS (свойство text-indent )
  • Колонки CSS

Как сделать перенос блока на новую строку?

60b9d750aead3242041133.png

Как сделать так чтобы блоки размещались не в одну строку, а чтобы каждый блок с новой строки?

.dialog < box-shadow: 0 0 5px rgba(0,0,0,0.2); padding: 10px 30px; >.d-content < display: inline-block; padding: 10px; background: #dcf8c6; border-radius: 0.4em; margin-top: 5px; >.mess_username < color: #1d5987; font-weight: 700; font-size: 12px; >.mess_date < color: #6c757d; font-weight: 400; font-size: 12px; >.mess_text < display: flex; >.new-message
  • Вопрос задан более двух лет назад
  • 13930 просмотров

5 комментариев

Простой 5 комментариев

Ankhena

Ankhena @Ankhena Куратор тега CSS

Перестать задавать им inline-block.
Блочные элементы сами по себе располагаются с новой строки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *