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;`

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:

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.

<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

使用 flow-root 工具创建具有自己的块格式化上下文的块级元素：

¥Use the flow-root utility to create a block-level element with its own block formatting context:

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 工具创建块级弹性容器：

¥Use the flex utility to create a block-level flex container:

内联弹性(Inline Flex)

¥Inline Flex

使用 inline-flex 工具创建与文本一起流动的内联弹性容器：

¥Use the inline-flex utility to create an inline flex container that flows with text:

网格(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:

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)

¥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

使用 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>

请参阅变体文档详细了解如何使用变体。

目录