Tailwind CSS - 顯示

上一頁
下一頁

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 Display 類的功能

  • block: 它將元素顯示為塊級元素，從新行開始，並佔據整個寬度。
  • inline-block: 將元素顯示為內聯級塊容器。元素本身格式化為內聯元素，但您可以應用高度和寬度值
  • inline: 它將元素顯示為內聯元素。任何高度和寬度屬性都不會生效。
  • flex: 它將元素顯示為塊級 Flex 容器。
  • inline-flex: 它將元素顯示為內聯級 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

以下示例演示了內聯、塊、內聯塊類的使用。

<!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 和內聯 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 和內聯 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>
列印頁面
上一頁
下一頁
廣告