Tailwind CSS - Justify Self

Tailwind CSS Justify Self 是一个实用类，用于将单个网格项沿其行内轴对齐。

Tailwind CSS Justify Self 类

以下是 Tailwind CSS Justify Self 类的列表，这些类有助于有效地将网格项沿其行内轴对齐。

Tailwind CSS Justify Self 类的功能

• justify-self-auto:此类用于根据其父网格容器元素的 justify-items 属性值对齐网格项。
• justify-self-start:此类用于将单个网格项与其网格单元格的起始位置对齐。
• justify-self-end:此类用于将单个网格项与其网格单元格的末尾对齐。
• justify-self-center:此类用于将单个网格项与其网格单元格的中心对齐。
• justify-self-stretch:此类拉伸单个网格项以填充其网格单元格中的可用空间。

Tailwind CSS Justify Self 类示例

以下示例将说明 Tailwind CSS Justify Self 类的实用功能。

网格项的自动对齐

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>