К содержанию

Навигация

Главное

Содержание

Метод отображения элемента

Классы отображения задают свойство display: блок, строку, флекс- или грид-контейнер, часть таблицы или полное скрытие. Берите их, когда элементу нужен другой способ раскладки, чем у его тега, или когда элемент показывают и скрывают в зависимости от ширины экрана.

Пример

Блок и строка

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

inline

Текст до элемента ширина не действует, отступы не раздвигают строки и текст после него в той же строке.

inline-block

Текст до элемента стоит в строке, принимает ширину и текст после него в той же строке.

block

Текст до элемента занимает всю строку и текст после него с новой строки.

Флекс и грид

flex и grid раскладывают прямых потомков; варианты с inline- делают то же, но сам контейнер стоит в строке текста.

Плавающие блоки и обёртки

flow-root удерживает внутри себя плавающий блок. content убирает область обёртки: её потомки раскладываются как потомки родителя. Красная рамка показывает обёртку, которая без класса остаётся одним флекс-элементом.

Таблица

Табличные классы раскладывают обычные блоки строками и колонками: ширину колонки задаёт самая широкая ячейка.

table → table-row-group → table-row → table-cell
Короткая ячейка
Длинная ячейка задаёт ширину всей колонки
3
Строка 2
Высоту строки задаёт самая высокая ячейка
6

Скрытие и ширина экрана

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

Классы

Класс CSS Значения
block display: block —
inline-{значение} display: inline-{значение} block, flex, table, grid
inline display: inline —
flex display: flex —
table display: table —
display-table display: table —
table-{значение} display: table-{значение} caption, cell, column, row
table-{значение}-group display: table-{значение}-group column, footer, header, row
flow-root display: flow-root —
grid display: grid —
content display: contents —
list-item display: list-item —
hidden display: none —

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

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

Применение

Блок и строка

block занимает всю ширину строки и начинается с новой строки. inline встаёт в текст и не принимает ширину, а вертикальные отступы не раздвигают строки. inline-block стоит в строке, но принимает размеры и отступы, как блок. list-item делает блок пунктом списка с маркером.

HTML
<span class="inline-block p-1">В строке, но с отступами</span>

Флекс и грид

Направление, перенос, выравнивание и колонки задают классы своих разделов; flex и grid только включают раскладку.

HTML
<div class="flex gap-1">
  <span class="flex-1">Элемент 1</span>
  <span class="flex-1">Элемент 2</span>
</div>

<div class="grid grid-col-3 gap-1">
  <!-- элементы сетки -->
</div>

Табличная раскладка

table, table-row-group, table-row, table-cell и другие табличные классы раскладывают обычные элементы как таблицу. display-table — второе имя table с тем же значением. Для табличных данных используйте <table>: табличные классы меняют только вид, а не смысл разметки.

HTML
<div class="table w-full">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">Ячейка 1</div>
      <div class="table-cell">Ячейка 2</div>
    </div>
  </div>
</div>

Обёртка без своей области

content задаёт display: contents: обёртка перестаёт быть отдельной областью, и её потомки раскладываются как прямые потомки родителя.

HTML
<div class="flex gap-1">
  <div class="flex-1">1</div>
  <div class="content">
    <div class="flex-1">2</div>
    <div class="flex-1">3</div>
  </div>
  <div class="flex-1">4</div>
</div>

Скрытие и показ по ширине экрана

Показ и скрытие на разных экранах собираются из двух классов: базового и класса с префиксом ширины.

HTML
<nav class="hidden md:block">Видна от ширины md</nav>
<button type="button" class="md:hidden">Видна до ширины md</button>

Ограничения

  • У элемента с content нет своей области: его фон, рамка и внутренние отступы не рисуются. Не ставьте этот класс на элементы со смыслом — кнопки, списки, заголовки таблиц: вспомогательные технологии могут потерять их роль.
  • hidden скрывает элемент и от программ экранного доступа. Текст, который нужно скрыть только визуально, скрывайте классом sr-only.
  • У семейства нет префиксов состояния: hover:hidden и подобные классы не существуют.

См. также

Settings

Тема
Font size
Page width