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 类的功能
- justify-items-start 此类用于将网格项与其网格单元格的起始位置对齐。
- justify-items-end 此类用于将网格项与其网格单元格的末尾位置对齐。
- justify-items-center 此类用于将网格项与其网格单元格的中心对齐。
- justify-items-stretch 此类拉伸网格项以填充其网格单元格中的可用空间。
Tailwind CSS Justify Items 类示例
以下示例将说明 Tailwind CSS Justify Items 类的实用功能。
网格项起始位置对齐
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>
