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;

示例

块级和行内元素

使用 inline、inline-block 和 block 实用工具来控制文本和元素的流

当控制文本流时，使用 CSS 属性 display: inline 将使元素内的文本正常换行。

而使用属性 display: inline-block 将包裹元素以防止内部文本超出其父元素。

最后，使用属性 display: block 将使元素独占一行并填充其父元素。

<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 实用工具创建一个具有自身块格式化上下文的块级元素

好吧，我告诉你一些事，小滑头。你知道那个小印章，上面写着“纽约公共图书馆”吗？嗯，这对你来说可能没什么意义，但这对我很重要。非常非常重要。

当然，继续，想笑就笑吧。我以前见过你这种人：花哨，到处出风头，炫耀传统。是的，我知道你在想什么。这家伙为什么对旧图书馆的书籍如此大惊小怪？好吧，让我给你一个提示，年轻人。

<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 容器

Inline Flex

使用 inline-flex 实用工具创建一个随文本流动的行内 flex 容器

Grid

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

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

Inline Grid

使用 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、table-row、table-cell、table-caption、table-column、table-column-group、table-header-group、table-row-group 和 table-footer-group 实用工具来创建行为类似于其各自表格元素的元素

歌曲

艺术家

年份

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 实用工具从文档中移除元素

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

当您想要在小屏幕上视觉上隐藏某些内容，但在较大屏幕上显示它时，这可能很有用。

响应式设计

前缀a display 实用工具带有断点变体，如 md:，仅在中等屏幕尺寸及以上应用该实用工具

<div class="flex md:inline-flex ...">
  <!-- ... -->
</div>

了解有关在变体文档中使用变体的更多信息。

示例