display
用于控制元素显示框类型的工具类。
快速参考
| 类 | 属性 |
|---|---|
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-path: inset(50%); white-space: nowrap; border-width: 0; |
not-sr-only | position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; |
示例
块级与行内
使用 inline、inline-block 和 block 工具类控制文本和元素的排列方式：
When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally.
While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.
Lastly, using the property display: block will put the element on its own line and fill its parent.
While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.
Lastly, using the property display: block will put the element on its own line and fill its parent.
html
<!-- [!code classes:inline,inline-block,block] -->
<p>
When controlling the flow of text, using the CSS property <span class="inline">display: inline</span> will cause the
text inside the element to wrap normally.
</p>
<p>
While using the property <span class="inline-block">display: inline-block</span> will wrap the element to prevent the
text inside from extending beyond its parent.
</p>
<p>
Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its
parent.
</p>Flow Root
使用 flow-root 工具类创建一个拥有独立块级格式化上下文的块级元素：
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.
html
<!-- [!code classes:flow-root] -->
<div class="p-4">
<div class="flow-root ...">
<div class="my-4 ...">Well, let me tell you something, ...</div>
</div>
<div class="flow-root ...">
<div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
</div>
</div>Flex
使用 flex 工具类创建块级弹性容器：
Andrew AlfredTechnical advisor
html
<!-- [!code classes:flex] -->
<div class="flex items-center">
<img src="path/to/image.jpg" />
<div>
<strong>Andrew Alfred</strong>
<span>Technical advisor</span>
</div>
</div>行内 Flex
使用 inline-flex 工具类创建随文本流动的行内弹性容器：
Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here.
html
<!-- [!code classes:inline-flex] -->
<p>
Today I spent most of the day researching ways to ...
<span class="inline-flex items-baseline">
<img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />
<span>Kramer</span>
</span>
keeps telling me there is no way to make it work, that ...
</p>Grid
使用 grid 工具类创建网格容器：
01
02
03
04
05
06
07
08
09
html
<!-- [!code classes:grid] -->
<div class="grid grid-cols-3 grid-rows-3 gap-4">
<!-- ... -->
</div>行内 Grid
使用 inline-grid 工具类创建行内网格容器：
01
02
03
04
05
06
01
02
03
04
05
06
html
<!-- [!code classes: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
使用 contents 工具类创建一个「幽灵」容器，其子元素会表现得像是父元素的直接子元素：
01
02
03
04
html
<!-- [!code classes: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、table-row、table-cell、table-caption、table-column、table-column-group、table-header-group、table-row-group 和 table-footer-group 工具类，创建行为与对应表格元素一致的元素：
Song
Artist
Year
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
html
<!-- [!code classes:table,table-header-group,table-row-group,table-row,table-cell] -->
<div class="table w-full ...">
<div class="table-header-group ...">
<div class="table-row">
<div class="table-cell text-left ...">Song</div>
<div class="table-cell text-left ...">Artist</div>
<div class="table-cell text-left ...">Year</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 工具类将元素从文档中移除：
01
02
03
html
<!-- [!code classes:hidden] -->
<div class="flex ...">
<div class="hidden ...">01</div>
<div>02</div>
<div>03</div>
</div>若要在视觉上隐藏元素但仍保留在文档中，请改用 visibility 属性。
仅屏幕阅读器
使用 sr-only 在视觉上隐藏元素，但屏幕阅读器仍可访问：
html
<!-- [!code classes:sr-only] -->
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only">Settings</span>
</a>使用 not-sr-only 撤销 sr-only，让元素对视力正常的用户和屏幕阅读器都可见：
html
<!-- [!code classes:sm:not-sr-only] -->
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only sm:not-sr-only">Settings</span>
</a>例如，当你想在小屏幕上视觉隐藏某内容、在较大屏幕上再显示时，这就很有用。
响应式设计
使用 md: 等断点变体作为 display 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：
html
<div class="flex md:inline-flex ...">
<!-- ... -->
</div>了解如何使用变体，请参阅变体文档。