布局
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: 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; |
示例(Examples)
¥Examples
块和内联(Block and Inline)
¥Block and Inline
使用 inline
、inline-block
和 block
工具控制文本和元素的流动:
¥Use the inline
, inline-block
, and block
utilities to control the flow of text and elements:
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 thetext 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 thetext 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 itsparent.</p>
流根(Flow Root)
¥Flow Root
使用 flow-root
工具创建具有自己的 块格式化上下文 的块级元素:
¥Use the flow-root
utility to create a block-level element with its own block formatting context:
<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
工具创建块级弹性容器:
¥Use the flex
utility to create a block-level flex container:
<div class="flex items-center"><img src="path/to/image.jpg" /><div> <strong>Andrew Alfred</strong> <span>Technical advisor</span></div></div>
内联弹性(Inline Flex)
¥Inline Flex
使用 inline-flex
工具创建与文本一起流动的内联弹性容器:
¥Use the inline-flex
utility to create an inline flex container that flows with text:
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. Kramer keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I just have to believe there's a way to make it work, there's simply too much opportunity 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
使用 grid
工具创建网格容器:
¥Use the grid
utility to create a grid container:
<div class="grid grid-cols-3 grid-rows-3 gap-4"><!-- ... --></div>
内联网格(Inline Grid)
¥Inline Grid
使用 inline-grid
工具创建内联网格容器:
¥Use the inline-grid
utility to create an inline grid container:
<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
使用 contents
工具创建一个 "phantom" 容器,其子元素充当父元素的直接子元素:
¥Use the contents
utility to create a "phantom" container whose children act like direct children of the parent:
<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
、table-row
、table-cell
、table-caption
、table-column
、table-column-group
、table-header-group
、table-row-group
和 table-footer-group
工具创建行为类似于其各自表格元素的元素:
¥Use the table
, table-row
, table-cell
, table-caption
, table-column
, table-column-group
, table-header-group
, table-row-group
, and table-footer-group
utilities to create elements that behave like their respective table elements:
<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)
¥Hidden
使用 hidden
工具从文档中删除元素:
¥Use the hidden
utility to remove an element from the document:
<div class="flex ..."><div class="hidden ...">01</div><div>02</div><div>03</div></div>
要从视觉上隐藏元素但将其保留在文档中,请改用 visibility 属性。
¥To visually hide an element but keep it in the document, use the visibility property instead.
仅限屏幕阅读器(Screen-reader only)
¥Screen-reader only
使用 sr-only
可以在视觉上隐藏元素而不向屏幕阅读器隐藏它:
¥Use sr-only
to hide an element visually without hiding it from screen readers:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only">Settings</span></a>
使用 not-sr-only
撤消 sr-only
,使元素对视力正常的用户和屏幕阅读器都可见:
¥Use not-sr-only
to undo sr-only
, making an element visible to sighted users as well as screen readers:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Settings</span></a>
当你想在小屏幕上隐藏某些东西但在大屏幕上显示它时,这会很有用。
¥This can be useful when you want to visually hide something on small screens but show it on larger screens for example.
响应式设计(Responsive design)
¥Responsive design
在 display
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="flex md:inline-flex ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。