Tailwind CSS - 專案對齊

Tailwind CSS 專案對齊 是一個實用程式類，用於沿容器的交叉軸定位 flex 和 grid 專案。

Tailwind CSS 專案對齊類

以下是Tailwind CSS 專案對齊類的列表，它們有助於有效地沿交叉軸對齊 flex 和 grid 專案。

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

Tailwind CSS 專案對齊類的功能

items-start: 此類替換 CSS align-items: flex-start; 屬性。此類用於將網格和 flex 專案對齊到交叉軸的起始位置。
items-end: 此類替換 CSS align-items: flex-end; 屬性。此類用於將網格和 flex 專案對齊到交叉軸的結束位置。
items-center: 此類替換 CSS align-items: center; 屬性。此類用於將網格和 flex 專案對齊到交叉軸的中心位置。
items-baseline 此類替換 CSS align-items: baseline; 屬性。此類用於沿容器的交叉軸對齊網格和 flex 專案，以便所有基線對齊。
items-stretch: 此類替換 CSS align-items: stretch; 屬性。此類以這樣的方式拉伸網格和 flex 專案，以便填充沿容器交叉軸的所有可用空間。

Tailwind CSS 專案對齊類示例

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

網格專案起始對齊

items-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 Items Start Class
    </h2>
    <div class="grid grid-cols-3 gap-4 items-start">
        <div class="bg-green-500 p-4 h-24">Item 1</div>
        <div class="bg-green-300 p-4 h-20">Item 2</div>
        <div class="bg-green-500 p-4 h-12">Item 3</div>
        <div class="bg-lime-500 p-4 h-24">Item 4</div>
        <div class="bg-lime-300 p-4 h-20">Item 5</div>
        <div class="bg-lime-500 p-4 h-12">Item 6</div>
    </div>
</body>

</html>

網格專案結束對齊

items-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 Items End Class
    </h2>
    <div class="grid grid-cols-3 gap-4 items-end">
        <div class="bg-green-500 p-4 h-24">Item 1</div>
        <div class="bg-green-300 p-4 h-20">Item 2</div>
        <div class="bg-green-500 p-4 h-12">Item 3</div>
        <div class="bg-lime-500 p-4 h-24">Item 4</div>
        <div class="bg-lime-300 p-4 h-20">Item 5</div>
        <div class="bg-lime-500 p-4 h-12">Item 6</div>
    </div>
</body>

</html>

Flex 專案居中對齊

items-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 Items Center Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-center
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
    </div>
</body>

</html>

Flex 專案基線對齊

items-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 Items Baseline Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-baseline
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
    </div>
</body>

</html>

Flex 專案拉伸對齊

items-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 Items 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-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>

列印頁面