Tailwind CSS - Display
Tailwind CSS Display 是一个实用程序类，用于确定元素在文档中的显示方式。此实用程序控制元素的显示类型。
Tailwind CSS Display 类
Tailwind CSS Display 类列表提供了一种有效的方法来确定元素的显示类型。
| 类 | CSS 属性 |
|---|---|
| block | display: block; |
| inline-block | display: inline-block; |
| inline | display: inline; |
| flex | display: flex; |
| inline-flex | display: inline-flex; |
| 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; |
| flow-root | display: flow-root; |
| grid | display: grid; |
| inline-grid | display: inline-grid; |
| contents | display: contents; |
| list-item | display: list-item; |
| hidden | display: none; |
Tailwind CSS 显示类的功能
- block: 它将元素显示为块级元素，从新行开始，并占据整个宽度。
- inline-block: 将元素显示为行内块级容器。元素本身被格式化为行内元素，但您可以应用高度和宽度值。
- inline: 它将元素显示为行内元素。任何高度和宽度属性均无效。
- flex: 将元素显示为块级弹性容器。
- inline-flex: 将元素显示为行内弹性容器。
- table: 将元素显示为表格。
- inline-table: 该元素显示为行内表格。
- table-caption: 使元素的行为类似于 <caption> 元素。
- table-cell: 使元素的行为类似于 <td> 元素。
- table-column: 使元素的行为类似于 <col> 元素。
- table-column-group: 使元素的行为类似于 <column>。
- table-footer-group: 使元素的行为类似于 <tfoot> 元素。
- table-header-group: 使元素的行为类似于 <thead> 元素。
- table-row-group: 使元素的行为类似于 <tbody> 元素。
- table-row: 使元素的行为类似于 <tr> 元素。
- flow-root: 创建一个具有自身块格式化上下文的块级元素。
- grid: 使元素显示为块级网格容器。
- inline-grid: 使元素显示为内联级网格容器。
- contents: 使容器消失，使元素的子元素成为 DOM 中的上一级子元素。
- list-item: 使元素的行为类似于 <li> 元素。
- hidden:使元素不可见，并将其从文档流中移除。
Tailwind CSS 显示类示例
以下示例将说明 Tailwind CSS display 类。
示例 1
以下示例演示了 Inline、Block、Inline-Block 类的用法。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h1 class="text-3xl">
Tailwind CSS Display- Inline, Block, Inline-Block
</h1>
<h2 class="text-2xl
my-2
text-lime-600">
Display - Inline
</h2>
<li class="inline
border-2
rounded p-1
border-blue-700">
Item1
</li>
<li class="inline
border-2
rounded p-1
border-rose-700">
Item2
</li>
<li class="inline
border-2
rounded p-1
border-fuchsia-700">
Item3
</li>
<h2 class="text-2xl
my-2
text-yellow-600">
Display - Block
</h2>
<li class="block
border-2
rounded p-1
border-blue-700">
Item1
</li>
<li class="block
border-2
rounded p-1
border-rose-700">
Item2
</li>
<li class="block
border-2
rounded p-1
border-fuchsia-700">
Item3
</li>
<h2 class="text-2xl
my-2
text-violet-600">
Display - Inline-block
</h2>
<li class="inline-block
border-2
h-12 w-32
rounded p-1
border-blue-700">
Inline-Block 1
</li>
<li class="inline-block
border-2
h-12 w-32
rounded p-1
border-rose-700">
Inline-Block 2
</li>
<li class="inline-block
h-12 w-32
border-2
rounded p-1
border-fuchsia-700">
Inline-Block 3
</li>
</body>
</html>
示例 2
以下示例演示了 Flex 和 Inline-Flex 类的用法。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h1 class="text-3xl">
Tailwind CSS Display- Flex, Inline-Flex
</h1>
<h2 class="text-2xl
my-2
text-lime-600">
display: flex
</h2>
<div class="flex
border-2
rounded p-1
border-blue-700
mb-1">
Flex-Block 1
</div>
<div class="flex
border-2
rounded p-1
border-rose-700
mb-1">
Flex-Block 2
</div>
<div class="flex
border-2
rounded p-1
border-fuchsia-700">
Flex-Block 3
</div>
<h2 class="text-2xl
my-2
text-violet-600">
display: inline-flex
</h2>
<div class="inline-flex
border-2
rounded p-1
border-blue-700">
Inline Flex-Block 1
</div>
<div class="inline-flex
border-2
rounded p-1
border-rose-700">
Inline Flex-Block 2
</div>
<div class="inline-flex
border-2
rounded p-1
border-fuchsia-700">
Inline Flex-Block 3
</div>
</body>
</html>
示例 3
以下示例演示了 table、table-caption、table-cell、table-column、table-column-group、table-footer-group、table-header-group、table-row-group 和 table-row 类的用法。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-3xl
text-center
mb-2">
Tailwind CSS Display Classes Example
</h2>
<div class="table
w-full
border">
<div class="table-caption
text-center
text-xl
font-bold
text-orange-400">
Sample Table
</div>
<div class="table-header-group">
<div class="table-row">
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Header 1
</div>
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Header 2
</div>
</div>
</div>
<div class="table-row-group">
<div class="table-row">
<div class="table-cell
text-center
p-2
border">
Row1-Cell1
</div>
<div class="table-cell
text-center
p-2
border">
Row1-cell2
</div>
</div>
<div class="table-row">
<div class="table-cell
text-center
p-2
border">
Row2-Cell1
</div>
<div class="table-cell
text-center
p-2
border">
Row2-Cell1
</div>
</div>
</div>
<div class="table-footer-group">
<div class="table-row">
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Footer 1
</div>
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Footer 2
</div>
</div>
</div>
</div>
</body>
</html>
示例 4
以下示例演示了 Grid 和 Inline-Grid 类的用法。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-3xl
mb-2">
Tailwind CSS Display Grid Example
</h2>
<div class="grid
bg-orange-200
p-2 mb-2
rounded
text-center">
grid-Block 1
</div>
<div class="grid
bg-amber-200
p-2 mb-2
rounded
text-center">
grid-Block 2
</div>
<div class="grid
bg-lime-200
p-2 mb-2
rounded
text-center">
grid-Block 3
</div>
<h2 class="text-3xl
mb-2">
Tailwind CSS Display Inline-Grid Example
</h2>
<div class="inline-grid
bg-orange-200
p-2 mb-2
rounded
text-center">
grid-Block 1
</div>
<div class="inline-grid
bg-amber-200
p-2 mb-2
rounded
text-center">
grid-Block 2
</div>
<div class="inline-grid
bg-lime-200
p-2 mb-2
rounded
text-center">
grid-Block 3
</div>
</body>
</html>
示例 5
以下示例演示了 Content、List-Item 和 Hidden 类的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-3xl
mb-2">
Tailwind CSS Content Class Example
</h2>
<div class="contents">
<div class="bg-blue-200 p-4">
<p>This is part of a contents element.</p>
</div>
<div class="bg-green-200 p-4">
<p>This is also part of a contents element.</p>
</div>
</div>
<h2 class="text-3xl
my-2">
Tailwind CSS List-Item Class Example
</h2>
<div class="list-item">
Item 1
</div>
<div class="list-item">
Item 2
</div>
<div class="list-item">
Item 3
</div>
<h2 class="text-3xl
mt-2">
Tailwind CSS hidden Class Example
</h2>
<div class="hidden">
<p>This content is hidden and will not be displayed.</p>
</div>
</body>
</html>
