布局
显示
用于控制元素显示框类型的工具类。
| 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 工具类来控制文本和元素的流动：
当控制文本流动时，使用 CSS 属性 display: inline 会使元素内的文本正常换行。
而使用属性 display: inline-block 会包装元素以防止内部文本扩展到父元素之外。
最后，使用属性 display: block 会将元素放在自己的行上并填满其父元素。
而使用属性 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 工具类创建具有自己块格式化上下文的块级元素：
好吧，让我告诉你一些事情，有趣的男孩。你知道那个小印章，上面写着"纽约公共图书馆"的那个吗？ 那可能对你没有任何意义，但对我意义重大。非常重大。
当然，继续，如果你想笑就笑吧。我以前见过你这种类型的人：花哨，制造场面，炫耀传统。 是的，我知道你在想什么。这家伙为什么对旧图书馆书籍这么大惊小怪？让我给你一个提示，小子。
<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 工具类创建块级弹性容器：
Andrew Alfred技术顾问
<div class="flex items-center"> <img src="path/to/image.jpg" /> <div> <strong>Andrew Alfred</strong> <span>技术顾问</span> </div></div>内联弹性布局
使用 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>Kramer</span> </span> 一直告诉我没有办法让它工作，那 ...</p>网格布局
使用 grid 工具类创建网格容器：
01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>内联网格
使用 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 工具类创建一个"幻影"容器，其子元素表现得像父元素的直接子元素：
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-row、table-cell、table-caption、table-column、table-column-group、table-header-group、table-row-group 和 table-footer-group 工具类创建表现得像相应表格元素的元素：
歌曲
艺术家
年份
滑动骨头先生（下一站，波特维尔）
马尔科姆·洛克耶
1961
女巫女人
老鹰乐队
1972
闪亮之星
地、风与火
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 ...">滑动骨头先生（下一站，波特维尔）</div> <div class="table-cell ...">马尔科姆·洛克耶</div> <div class="table-cell ...">1961</div> </div> <div class="table-row"> <div class="table-cell ...">女巫女人</div> <div class="table-cell ...">老鹰乐队</div> <div class="table-cell ...">1972</div> </div> <div class="table-row"> <div class="table-cell ...">闪亮之星</div> <div class="table-cell ...">地、风与火</div> <div class="table-cell ...">1975</div> </div> </div></div>隐藏
使用 hidden 工具类从文档中移除元素：
01
02
03
<div class="flex ..."> <div class="hidden ...">01</div> <div>02</div> <div>03</div></div>要在视觉上隐藏元素但将其保留在文档中，请改用可见性属性。
屏幕阅读器专用
使用 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>当您想在小屏幕上视觉隐藏某些内容但在大屏幕上显示它时，这会很有用。
响应式设计
Prefix a display utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="flex md:inline-flex ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.