display

Class Styles

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

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 会使元素独占一行并填满其父元素。

<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

使用 flex 工具创建一个块级弹性容器：

行内 Flex

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

网格

使用 grid 工具创建一个网格容器：

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>

行内网格

使用 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 工具创建一个“虚幻”容器，其子元素像父元素的直接子元素一样表现：

<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 工具从文档中移除一个元素：

<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">设置</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.

目录