Макет
Утилиты для управления типом блока отображения элемента.
Class | Styles |
---|---|
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; |
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; |
list-item | display: list-item; |
hidden | display: none; |
sr-only | position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0; |
not-sr-only | position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal; |
Используйте утилиты inline
, inline-block
и 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
для создания блочного элемента с собственным контекстом блочного форматирования:
<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-контейнера:
<div class="flex items-center"> <img src="path/to/image.jpg" /> <div> <strong>Эндрю Альфред</strong> <span>Технический советник</span> </div></div>
Используйте утилиту 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-контейнера:
<div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>
Используйте утилиту inline-grid
для создания inline grid-контейнера:
<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
для создания "фантомного" контейнера, чьи дочерние элементы ведут себя как прямые дочерние элементы родителя:
<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-row
, table-cell
, table-caption
, table-column
, table-column-group
, table-header-group
, table-row-group
и table-footer-group
для создания элементов, которые ведут себя как соответствующие элементы таблицы:
<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
для удаления элемента из документа:
<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>
Подробнее об использовании вариантов читайте в документации по вариантам.