Tailwind CSS - 自對齊 (Justify Self)

Tailwind CSS 自對齊 (Justify Self) 是一個實用程式類，用於沿其內聯軸對齊單個網格專案。

Tailwind CSS 自對齊類

以下是Tailwind CSS 自對齊 (Justify Self) 類的列表，這些類有助於有效地沿其內聯軸單獨對齊網格專案。

類名	CSS 屬性
justify-self-auto	justify-self: auto;
justify-self-start	justify-self: start;
justify-self-end	justify-self: end;
justify-self-center	justify-self: center;
justify-self-stretch	justify-self: stretch;

Tailwind CSS 自對齊類的功能

justify-self-auto: 此類用於根據其父網格容器元素的justify-items 屬性的值來對齊網格專案。
justify-self-start: 此類用於將單個網格專案對齊到其網格單元的起始位置。
justify-self-end: 此類用於將單個網格專案對齊到其網格單元的結束位置。
justify-self-center: 此類用於將單個網格專案對齊到其網格單元的中心位置。
justify-self-stretch: 此類將單個網格專案拉伸以填充其網格單元中的可用空間。

Tailwind CSS 自對齊類示例

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

網格專案的自動對齊

justify-self-auto 類將單個網格專案設定為根據網格的 justify-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 Justify Self Auto Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!-- The justify-self-auto class will align individual 
                grid item based on justify-items property of its 
                parent grid container-->
        <div class="bg-lime-300 p-4 justify-self-auto">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>

網格專案的起始對齊

justify-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 Justify Self Start Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-start class will align individual 
               grid item at the start of its grid cell-->
        
        <div class="bg-lime-300 p-4 justify-self-start">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>

網格專案的結束對齊

justify-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 Justify Self End Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-end class will align individual
               grid item at the end of its inline axis-->
        
        <div class="bg-lime-300 p-4 justify-self-end">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>

網格專案的居中對齊

justify-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 Justify Self Center Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-center class will align individual 
               grid item at the center of its inline axis-->
        
        <div class="bg-lime-300 p-4 justify-self-center">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>

網格專案的拉伸對齊

justify-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 Justify Self Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-stretch class will stretch individual 
               grid item to fill space available in its inline axis-->
        
        <div class="bg-lime-300 p-4 justify-self-stretch">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>

列印頁面