Lzh on GitHub

display

控制元素的显示框(display box)类型的工具类。

快速参考

类名样式
inlinedisplay: inline;
blockdisplay: block;
inline-blockdisplay: inline-block;
flow-rootdisplay: flow-root;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
tabledisplay: table;
更多...

示例

块级和内联

使用 inline、inline-block 和 block 工具类控制文本和元素的流式布局：

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

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

最后，使用属性 display: 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. 
<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

使用 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 ...">好吧，我来告诉你一些事情，...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">当然，想笑就笑吧...</div>
  </div>
</div>

Flex

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

Andrew Alfred Technical advisor 
<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>安德鲁·阿尔弗雷德</strong>
    <span>技术顾问</span>
  </div>
</div>

Inline 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. 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>
  今天我大部分时间都在研究如何 ...
  <span class="inline-flex items-baseline">
    <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />
    <span>克莱默</span>
  </span>
  一直告诉我这是不可能的，...
</p>

Grid

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

01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>

Inline 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

使用 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、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 ...">歌曲</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

使用 hidden 工具类从文档中移除元素：

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>

例如，当你想在小屏幕上视觉上隐藏某些内容，但在大屏幕上显示它时，这非常有用。

响应式设计

为 display 工具类添加断点变体的前缀（如 md:），以便仅在中等屏幕尺寸及以上应用该工具类：

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

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