Tailwind CSS - Align Items
Tailwind CSS Align Items 是一个实用类，用于沿容器的横轴定位弹性项和网格项。
Tailwind CSS Align Items 类
以下是 Tailwind CSS Align Items 类的列表，这些类有助于有效地沿横轴对齐弹性项和网格项。
| 类 | CSS 属性 |
|---|---|
| items-start | align-items: flex-start; |
| items-end | align-items: flex-end; |
| items-center | align-items: center; |
| items-baseline | align-items: baseline; |
| items-stretch | align-items: stretch; |
Tailwind CSS 对齐项目类的功能
- items-start 此类替换 CSS align-items: flex-start; 属性。此类用于将网格和弹性项目与横轴的起点对齐。
- items-end 此类替换 CSS align-items: flex-end; 属性。此类用于将网格和弹性项目与横轴的终点对齐。
- items-center 此类替换 CSS align-items: center; 属性。此类用于将网格和弹性项目与横轴中心对齐。
- items-baseline 此类取代 CSS align-items: baseline; 属性。此类用于将网格和弹性项目沿容器的横轴对齐，以使所有基线对齐。
- items-stretch: 此类取代 CSS align-items: stretch; 属性。该类会拉伸网格和弹性项目，使其填满容器横轴上的所有可用空间。
Tailwind CSS 对齐项目类示例
以下示例将说明 Tailwind CSS 对齐项目类的实用功能。
网格项目的起始对齐
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 Items Start Class
</h2>
<div class="grid grid-cols-3 gap-4 items-start">
<div class="bg-green-500 p-4 h-24">Item 1</div>
<div class="bg-green-300 p-4 h-20">Item 2</div>
<div class="bg-green-500 p-4 h-12">Item 3</div>
<div class="bg-lime-500 p-4 h-24">Item 4</div>
<div class="bg-lime-300 p-4 h-20">Item 5</div>
<div class="bg-lime-500 p-4 h-12">Item 6</div>
</div>
</body>
</html>
网格项目的结尾对齐
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 Items End Class
</h2>
<div class="grid grid-cols-3 gap-4 items-end">
<div class="bg-green-500 p-4 h-24">Item 1</div>
<div class="bg-green-300 p-4 h-20">Item 2</div>
<div class="bg-green-500 p-4 h-12">Item 3</div>
<div class="bg-lime-500 p-4 h-24">Item 4</div>
<div class="bg-lime-300 p-4 h-20">Item 5</div>
<div class="bg-lime-500 p-4 h-12">Item 6</div>
</div>
</body>
</html>
弹性项目居中对齐
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 Items Center Class
</h2>
<div class="flex flex-wrap gap-3 h-64 items-center
bg-lime-200">
<div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
<div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
<div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
<div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
<div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
<div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
</div>
</body>
</html>
弹性项目基线对齐
items-baseline 类将项目定位到容器横轴的基线，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Items Baseline Class
</h2>
<div class="flex flex-wrap gap-3 h-64 items-baseline
bg-lime-200">
<div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
<div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
<div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
<div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
<div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
<div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
</div>
</body>
</html>
弹性项目拉伸对齐
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 Items Stretch Class
</h2>
<div class="flex flex-wrap gap-3 h-64 items-stretch
bg-lime-200">
<div class="bg-green-500 p-4 w-28">Item 1</div>
<div class="bg-green-500 p-4 w-28">Item 3</div>
<div class="bg-green-500 p-4 w-28">Item 3</div>
<div class="bg-green-500 p-4 w-28">Item 4</div>
<div class="bg-green-500 p-4 w-28">Item 5</div>
<div class="bg-green-500 p-4 w-28">Item 6</div>
</div>
</body>
</html>
