Tailwind CSS - 自對齊

Tailwind CSS 自對齊是一個實用程式類，用於沿其容器的交叉軸對齊單個網格和 flex 專案。

Tailwind CSS 自對齊類

以下是Tailwind CSS 自對齊類的列表，這些類有助於有效地單獨沿其交叉軸對齊網格和 flex 專案。

類	CSS 屬性
self-auto	align-self: auto;
self-start	align-self: flex-start;
self-end	align-self: flex-end;
self-center	align-self: center;
self-stretch	align-self: stretch;
self-baseline	align-self: baseline;

Tailwind CSS 自對齊類的功能

self-auto: 此類替換 CSS align-self: auto; 屬性。它用於根據其父容器元素的align-items屬性的值對齊專案。
self-start: 此類替換 CSS align-self: flex-start; 屬性。它用於將單個專案定位在容器交叉軸的開頭，而不管容器的align-items值如何。
self-end: 此類替換 CSS align-self: flex-end; 屬性。它用於將單個專案定位在容器交叉軸的末尾，而不管容器的align-items值如何。
self-center: 此類替換 CSS align-self: center; 屬性。它用於將單個專案定位在容器交叉軸的中心，而不管容器的align-items值如何。
self-stretch: 此類替換 CSS align-self: stretch; 屬性。它會拉伸單個專案以填充其容器交叉軸中的可用空間，而不管容器的align-items值如何。
self-baseline: 此類替換 CSS align-self: baseline; 屬性。它用於將單個專案定位在容器交叉軸的基線處，而不管容器的align-items值如何。

Tailwind CSS 自對齊類示例

以下示例將說明 Tailwind CSS 的 Align Self 類實用程式。

Flex 專案的自動對齊

self-auto 類將各個專案設定為根據容器的 align-items 屬性的值進行定位，如下例所示。

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Self Auto Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        
        <!--The self-auto class enable individual item to align -->
        <!-- itself based on the align-items property of parent grid container-->
        
        <div class="bg-green-500 p-4 w-28 self-auto">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>

Flex 專案起始對齊

self-start 類將各個專案設定為定位到容器橫軸的起始位置，如下例所示。

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Self Start Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28 self-start">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>

Flex 專案結束對齊

self-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 Self End Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28 self-end">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>

Grid 專案居中對齊

self-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 Self Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-4 h-36">Item 1</div>
        <div class="bg-green-300 p-4 h-24 self-center">Item 2</div>
        <div class="bg-green-500 p-4 h-36">Item 3</div>
        <div class="bg-green-500 p-4 h-36">Item 4</div>
        <div class="bg-green-300 p-4 h-24 self-center">Item 5</div>
        <div class="bg-green-500 p-4 h-36">Item 6</div>
    </div>
</body>

</html>

Flex 專案拉伸對齊

self-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 Self Stretch Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28 self-stretch">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>

Grid 專案基線對齊

self-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 Self Baseline Class
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-4 h-20">Item 1</div>
        <div class="bg-green-300 p-4 self-baseline">Item 2</div>
        <div class="bg-green-500 p-4 h-20">Item 3</div>
        <div class="bg-green-500 p-4 h-20">Item 4</div>
        <div class="bg-green-300 p-4 self-baseline">Item 5</div>
        <div class="bg-green-500 p-4 h-20">Item 6</div>
    </div>
</body>

</html>

列印頁面