Tailwind CSS - 專案對齊

Tailwind CSS 專案對齊 是一個實用程式類，用於沿其內聯軸對齊網格專案或網格專案在其網格單元格內的水平對齊。

Tailwind CSS 專案對齊類

以下是Tailwind CSS 專案對齊 類的列表，有助於有效地沿其內聯軸對齊網格專案。

類	CSS 屬性
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

Tailwind CSS 專案對齊類的功能

justify-items-start: 此類用於將網格專案對齊到其網格單元格的開頭。
justify-items-end: 此類用於將網格專案對齊到其網格單元格的結尾。
justify-items-center 此類用於將網格專案對齊到其網格單元格的中心。
justify-items-stretch: 此類將網格專案拉伸以填充其網格單元格中的可用空間。

Tailwind CSS 專案對齊類示例

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

網格專案起始對齊

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

</html>

網格專案結束對齊

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

</html>

網格專案中心對齊

justify-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 Justify Items Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4 justify-items-center 
                border-2 border-green-500 p-2">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-lime-300 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-lime-300 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-lime-300 p-4">Item 6</div>
    </div>
</body>

</html>

網格專案拉伸對齊

justify-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 Justify Items Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-4 justify-items-stretch 
                border-2 border-green-500 p-2">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-lime-300 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-lime-300 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-lime-300 p-4">Item 6</div>
    </div>
</body>

</html>

列印頁面