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>

打印页面