Layout
display
用于控制元素显示盒模型类型的工具类。
| 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 工具类来控制文本和元素的流动:
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.
<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 工具类来创建一个具有自己的块级格式化上下文的块级元素:
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.
<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 工具类来创建一个块级 flex 容器:
Andrew AlfredTechnical advisor
<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 工具类来创建一个可以随文本流动的行内 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.
<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
<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
<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 工具类来创建行为类似于各自表格元素的元素:
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
<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
<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">Settings</span></a>使用 not-sr-only 来取消 sr-only 的效果,使元素对视觉用户和屏幕阅读器用户都可见:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Settings</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.
