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

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

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

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

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

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

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

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

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

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

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

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

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

Включаем 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 расстояния между элементами и границами родителя равны

justify-content: 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

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; символы всё же в определённый момент переходят на следующую строчку.

Значения pre‑wrap и pre‑line поддерживаются 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

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

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

.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

• Вопрос задан более двух лет назад
• 13273 просмотра

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

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

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

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