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

display
sm
md
lg
xl

Классы

Класс Значение
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
сontent display: contents;
list-item display: list-item;
hidden display: none;

Описание

Модификатор управляет методом отображения элемента.

Использование: {условие действия}:{модификатор}

  • Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:
    • sm — для экранов small и больше.
    • md — для экранов medium и больше.
    • lg — для экранов large и больше.
    • xl — для экранов extra large и больше.
  • Модификатор. Обязательный параметр.
    • block — отображается как блок;
    • inline-block — отображается как строчный блок;
    • inline — отображается как строчный элемент;
    • flex — отображается как флексбокс контейнер;
    • inline-flex — отображается как строчный флексбокс контейнер;
    • table — отображается как таблица;
    • inline-table — отображается как строчная таблица;
    • table-caption — отображается как заголовок таблицы;
    • table-cell — отображается как ячейка таблицы;
    • table-column — отображается как колонка таблицы;
    • table-column-group — отображается как группа колонок таблицы;
    • table-footer-group — отображается как группа в футере таблицы;
    • table-header-group — отображается как группа к хедере таблицы;
    • table-row-group — отображается как группа строк таблицы;
    • table-row — отображается как строка таблицы;
    • flow-root — элемент с собственным контекстом форматирования блока;
    • grid — отображается как контейнер сетки;
    • inline-grid — отображается как строковая сетка;
    • content — отображается как фантомный элемент;
    • list-item — отображается как элемент списка;
    • hidden — для скрытия элемента.

Пример

Блок

Используйте модификатор block для отображения элемента как блок.

1 2 3 
<div class="space-y-4 ...">
    <span class="block ...">1</span>
    <span class="block ...">2</span>
    <span class="block ...">3</span>
</div>

Строчный блок

Используйте модификатор inline-block для отображения элемента как строчный блок.

1
2
3
<div class="space-x-4 ...">
    <div class="inline-block ...">1</div>
    <div class="inline-block ...">2</div>
    <div class="inline-block ...">3</div>
</div>

Строчный элемент

Используйте модификатор inline для отображения строчного элемента.

1
2
3
<div class="space-x-4 ...">
    <div class="inline ...">1</div>
    <div class="inline ...">2</div>
    <div class="inline ...">3</div>
</div>

Флексбокс

Используйте модификатор flex для отображения элемента как флексбокс контейнер.

1 2 3 
<div class="flex space-x-4 ...">
    <span class="flex-1 ...">1</span>
    <span class="flex-1 ...">2</span>
    <span class="flex-1 ...">3</span>
</div>

Строчный флексбокс

Используйте модификатор inline-flex для отображения элемента как строчный флексбокс контейнер.

1 2 3 
<div class="inline-flex space-x-4 ...">
    <span class="flex-1 ...">1</span>
    <span class="flex-1 ...">2</span>
    <span class="flex-1 ...">3</span>
</div>

Таблица

Используйте модификаторы table, inline-table, table-caption, table-cell, table-column, table-column-group,table-footer-group, table-header-group, table-row-group, table-row для отображения как соотвествующие элементы таблицы.

A cell with more content
Cell 2
Cell 3
Cell 4
A cell with more content
Cell 6
<div class="table w-full bg-info bg-stripes bg-stripes-blue radius-3 overflow-hidden">
    <div class="table-row-group">
        <div class="table-row">
        <div class="table-cell ...">A cell with more content</div>
        <div class="table-cell ...">Cell 2</div>
        <div class="table-cell ...">Cell 3</div>
        </div>
        <div class="table-row">
        <div class="table-cell ...">Cell 4</div>
        <div class="table-cell ...">A cell with more content</div>
        <div class="table-cell ...">Cell 6</div>
        </div>
    </div>
</div>

Сетка

Используйте модификатор grid для отображения элемента как контейнер сетки.

<div class="grid gap-4 grid-col-3">
  <!-- ... -->
</div>

Строчная сетка

Используйте модификатор inline-grid для отображения элемента как строчный контейнер сетки.

1
2
3
1
2
3
<div class="inline-grid gap-4 grid-col-3">
  <!-- ... -->
</div>
<div class="inline-grid gap-4 grid-col-3">
  <!-- ... -->
</div>

Контент

Используйте модификатор d-content для отображения элемента как «фантомный» контейнер, дочерние элементы которого действуют как прямые дочерние элементы родителя.

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

Скрытый

Используйте модификатор hidden для скрытия элемента. Имейте ввиду что при этом элемент удаляется из потока документа.

Если вам необходимо сохранить элемент в потоке документа, воспользуйтесь модификатором invisible.

2
3
<div class="flex space-x-4 ...">
    <div class="hidden">1</div>
    <div>2</div>
    <div>3</div>
</div>

Адаптивность

Для управления методом отображения элемента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm, md, lg, xl ) через двоеточие (:) к модификатору.

Например, воспользуйтесь модификатором md:hidden для скрытия элемента для экранов размером Medium и больше.

<div class="md:hidden"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью