Tailwind CSS - 內容對齊

上一個
下一個

Tailwind CSS 內容對齊 是一種實用程式類，用於沿橫軸在多行 Flex 容器和 Grid 容器中定位行。

Tailwind CSS 內容對齊類

以下是Tailwind CSS 內容對齊類的列表，這些類有助於有效地沿橫軸對齊 Flex 和 Grid 專案。

類 CSS 屬性
content-normal align-content: normal;
content-center align-content: center;
content-start align-content: flex-start;
content-end align-content: flex-end;
content-between align-content: space-between;
content-around align-content: space-around;
content-evenly align-content: space-evenly;
content-baseline align-content: baseline;
content-stretch align-content: stretch;

Tailwind CSS 內容對齊類功能

  • content-normal: 此類具有預設行為，可以像未設定 align-content 屬性一樣正常對齊專案。
  • content-center: 此類用於將專案對齊到橫軸的中心。
  • content-start: 此類用於將專案對齊到橫軸的開頭。
  • content-end: 此類用於將專案對齊到橫軸的結尾。
  • content-between: 此類用於沿橫軸對齊專案，並在每個專案之間留出相等的空間。
  • content-around: 此類沿橫軸對齊專案，並在每個專案周圍留出相等的空間。
  • content-evenly: 此類沿橫軸對齊專案，並在每個專案之間和周圍留出相等的空間。
  • content-baseline: 此類用於沿其基線對齊專案。
  • content-stretch: 此類會拉伸 Flex 或 Grid 專案以填充容器中的可用空間。

Tailwind CSS 內容對齊類示例

以下示例將說明 Tailwind CSS 內容對齊類實用程式。

預設對齊的網格專案

content-normal 類設定專案的預設定位，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Normal Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-56 content-normal
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

居中對齊的網格專案

content-center 類將專案的行設定在橫軸的中心，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-56 content-center
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

開始和結束對齊的 Flex 專案

content-start 和 content-end 類將專案的行設定在橫軸的開頭和結尾，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Align Content Start Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-start
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content End Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-end
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
</body>

</html>

網格專案之間的和周圍的對齊

content-between 和 content-around 類將專案的行沿橫軸設定，並在每個專案之間和周圍留出相等的空間，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content between Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-between
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Around Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-around
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

均勻和基線對齊的 Flex 專案

content-evenly 和 content-baseline 類將專案的行均勻地和沿著橫軸的基線設定，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Evenly Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-evenly
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Baseline Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-baseline
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
</body>

</html>

拉伸的網格專案

content-stretch 類將專案的行沿橫軸拉伸設定，如下面的示例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>
列印頁面

上一篇
下一篇
廣告