К содержанию

Навигация

Главное

Содержание

Перенос элементов

Классы flex-wrap, flex-wrap-reverse и flex-nowrap задают flex-wrap: остаются ли флекс-элементы в одной строке или переносятся на следующие. Берите flex-wrap для наборов меток, кнопок и карточек, число которых заранее неизвестно.

Пример

Перенос и одна строка

Семь элементов одной ширины в узком контейнере. Подпись над образцом — класс контейнера. Без переноса элементы выходят за контейнер, и его можно прокрутить.

flex-nowrap
1 2 3 4 5 6 7
flex-wrap
1 2 3 4 5 6 7
flex-wrap-reverse
1 2 3 4 5 6 7

Ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: на узком экране элементы переносятся, с ширины md стоят в одну строку.

Классы

Класс CSS Значения
flex-wrap flex-wrap: wrap —
flex-wrap-reverse flex-wrap: wrap-reverse —
flex-nowrap flex-wrap: nowrap —

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:flex-wrap.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Как выбрать

  • flex-nowrap — одна строка; значение по умолчанию у флекс-контейнера. Элементы сжимаются, а если не могут — выходят за контейнер.
  • flex-wrap — новые строки идут ниже первой.
  • flex-wrap-reverse — новые строки идут выше первой.

Набор меток

HTML
<ul class="flex flex-wrap gap-1">
  <li>Дизайн</li>
  <li>Разработка</li>
  <li>Документация</li>
</ul>

Промежутки между элементами и строками задают классы gap-*, выравнивание строк в контейнере — content-cross-*.

Ограничения

  • Перенос нужен, чтобы работали классы выравнивания строк content-cross-*: у контейнера без переноса одна строка, и выравнивать её нечем.
  • flex-wrap-reverse меняет только показ; фокус клавиатуры и программы экранного доступа идут по порядку разметки.

См. также

Settings

Тема
Font size
Page width