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>

打印页面