Макет

display

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

ClassStyles
inline
display: inline;
block
display: block;
inline-block
display: inline-block;
flow-root
display: flow-root;
flex
display: flex;
inline-flex
display: inline-flex;
grid
display: grid;
inline-grid
display: inline-grid;
contents
display: contents;
table
display: table;

Примеры

Block и Inline

Используйте утилиты inline, inline-block и block для управления потоком текста и элементов:

При управлении потоком текста использование CSS свойства display: inline заставит текст внутри элемента переноситься нормально.

В то время как использование свойства display: inline-block обернет элемент, чтобы предотвратить выход текста за пределы его родителя.

Наконец, использование свойства display: block поместит элемент на свою собственную строку и заполнит его родителя.
<p>  При управлении потоком текста использование CSS свойства <span class="inline">display: inline</span> заставит  текст внутри элемента переноситься нормально.</p><p>  В то время как использование свойства <span class="inline-block">display: inline-block</span> обернет элемент, чтобы предотвратить  выход текста за пределы его родителя.</p><p>  Наконец, использование свойства <span class="block">display: block</span> поместит элемент на свою собственную строку и заполнит его  родителя.</p>

Flow Root

Используйте утилиту flow-root для создания блочного элемента с собственным контекстом блочного форматирования:

Ну, позвольте мне рассказать вам кое-что, забавный мальчик. Знаете эту маленькую печать, ту, что говорит "Нью-Йоркская публичная библиотека"? Ну, это может ничего не значить для вас, но для меня это много значит. Очень много.
Конечно, смейтесь, если хотите. Я видел таких, как вы, раньше: Блестящие, создающие сцену, пренебрегающие условностями. Да, я знаю, о чем вы думаете. Что этот парень так много шума поднимает из-за старых библиотечных книг? Ну, позвольте мне дать вам подсказку, младший.
<div class="p-4">  <div class="flow-root ...">    <div class="my-4 ...">Ну, позвольте мне рассказать вам кое-что, ...</div>  </div>  <div class="flow-root ...">    <div class="my-4 ...">Конечно, смейтесь, если хотите...</div>  </div></div>

Flex

Используйте утилиту flex для создания блочного flex-контейнера:

Эндрю АльфредТехнический советник
<div class="flex items-center">  <img src="path/to/image.jpg" />  <div>    <strong>Эндрю Альфред</strong>    <span>Технический советник</span>  </div></div>

Inline Flex

Используйте утилиту inline-flex для создания inline flex-контейнера, который течет с текстом:

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

<p>  Сегодня я провел большую часть дня, исследуя способы...  <span class="inline-flex items-baseline">    <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />    <span>Крамер</span>  </span>  продолжает говорить мне, что нет способа заставить это работать, что...</p>

Grid

Используйте утилиту grid для создания grid-контейнера:

01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-3 grid-rows-3 gap-4">  <!-- ... --></div>

Inline Grid

Используйте утилиту inline-grid для создания inline grid-контейнера:

01
02
03
04
05
06
01
02
03
04
05
06
<span class="inline-grid grid-cols-3 gap-4">  <span>01</span>  <span>02</span>  <span>03</span>  <span>04</span>  <span>05</span>  <span>06</span></span><span class="inline-grid grid-cols-3 gap-4">  <span>01</span>  <span>02</span>  <span>03</span>  <span>04</span>  <span>05</span>  <span>06</span></span>

Contents

Используйте утилиту contents для создания "фантомного" контейнера, чьи дочерние элементы ведут себя как прямые дочерние элементы родителя:

01
02
03
04
<div class="flex ...">  <div class="flex-1 ...">01</div>  <div class="contents">    <div class="flex-1 ...">02</div>    <div class="flex-1 ...">03</div>  </div>  <div class="flex-1 ...">04</div></div>

Table

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

Песня
Исполнитель
Год
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
<div class="table w-full ...">  <div class="table-header-group ...">    <div class="table-row">      <div class="table-cell text-left ...">Песня</div>      <div class="table-cell text-left ...">Исполнитель</div>      <div class="table-cell text-left ...">Год</div>    </div>  </div>  <div class="table-row-group">    <div class="table-row">      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>      <div class="table-cell ...">Malcolm Lockyer</div>      <div class="table-cell ...">1961</div>    </div>    <div class="table-row">      <div class="table-cell ...">Witchy Woman</div>      <div class="table-cell ...">The Eagles</div>      <div class="table-cell ...">1972</div>    </div>    <div class="table-row">      <div class="table-cell ...">Shining Star</div>      <div class="table-cell ...">Earth, Wind, and Fire</div>      <div class="table-cell ...">1975</div>    </div>  </div></div>

Hidden

Используйте утилиту hidden для удаления элемента из документа:

02
03
<div class="flex ...">  <div class="hidden ...">01</div>  <div>02</div>  <div>03</div></div>

Чтобы визуально скрыть элемент, но оставить его в документе, используйте вместо этого свойство visibility.

Только для программ чтения с экрана

Используйте sr-only для визуального скрытия элемента без скрытия его от программ чтения с экрана:

<a href="#">  <svg><!-- ... --></svg>  <span class="sr-only">Настройки</span></a>

Используйте not-sr-only для отмены sr-only, делая элемент видимым для зрячих пользователей, а также для программ чтения с экрана:

<a href="#">  <svg><!-- ... --></svg>  <span class="sr-only sm:not-sr-only">Настройки</span></a>

Это может быть полезно, когда вы хотите визуально скрыть что-то на маленьких экранах, но показать на больших экранах, например.

Адаптивный дизайн

Префикс a display утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="flex md:inline-flex ...">  <!-- ... --></div>

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

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков