Tailwind CSS - Align Self
Tailwind CSS Align Self 是一个实用类，用于将单个网格和弹性项目沿其容器的横轴对齐。
Tailwind CSS Align Self 类
以下是 Tailwind CSS Align Self 类的列表，这些类有助于有效地将网格和弹性项目沿其横轴对齐。
| 类 | CSS 属性 |
|---|---|
| self-auto | align-self: auto; |
| self-start | align-self: flex-start; |
| self-end | align-self: flex-end; |
| self-center | align-self: center; |
| self-stretch | align-self: stretch; |
| self-baseline | align-self: baseline; |
Tailwind CSS Align Self 类的功能
- self-auto:此类替换 CSS align-self: auto; 属性。它用于根据父容器元素的 align-items 属性值对齐项目。
- self-start:此类替换 CSS align-self: flex-start; 属性。它用于将单个项目定位到容器横轴的起始位置，而不管容器的 align-items 值如何。
- self-end:此类替换 CSS align-self: flex-end; 属性。它用于将单个项目定位到容器横轴的末端，而不管容器的 align-items 值如何。
- self-center: 此类替换了 CSS 的 align-self: center; 属性。它用于将单个项目定位到容器横轴的中心，而不管容器的 align-items 值如何。
- self-stretch: 此类替换了 CSS 的 align-self: stretch; 属性。它会拉伸单个项目以填充其容器横轴的可用空间，而不管容器的 align-items 值如何。
- self-baseline: 此类替换了 CSS 的 align-self: base; 属性。它用于将单个项目定位到容器横轴的基线，无论容器的 align-items 值如何。
Tailwind CSS Align Self 类示例
以下示例将说明 Tailwind CSS Align Self 类的实用功能。
弹性项目自动对齐
self-auto 类根据容器的 align-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 Self Auto Class
</h2>
<div class="flex flex-wrap gap-3 h-64 items-stretch
bg-lime-200">
<!--The self-auto class enable individual item to align -->
<!-- itself based on the align-items property of parent grid container-->
<div class="bg-green-500 p-4 w-28 self-auto">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>
弹性项目起始对齐
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 Self Start 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-300 p-4 w-28 self-start">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>
弹性项目结尾对齐
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 Self End 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-300 p-4 w-28 self-end">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>
网格项目中心对齐
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 Self Center Class
</h2>
<div class="grid grid-cols-3 gap-4">
<div class="bg-green-500 p-4 h-36">Item 1</div>
<div class="bg-green-300 p-4 h-24 self-center">Item 2</div>
<div class="bg-green-500 p-4 h-36">Item 3</div>
<div class="bg-green-500 p-4 h-36">Item 4</div>
<div class="bg-green-300 p-4 h-24 self-center">Item 5</div>
<div class="bg-green-500 p-4 h-36">Item 6</div>
</div>
</body>
</html>
弹性项目拉伸对齐
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 Self 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-300 p-4 w-28 self-stretch">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>
网格项目基线对齐
self-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 Self Baseline Class
</h2>
<div class="grid grid-cols-3 gap-4">
<div class="bg-green-500 p-4 h-20">Item 1</div>
<div class="bg-green-300 p-4 self-baseline">Item 2</div>
<div class="bg-green-500 p-4 h-20">Item 3</div>
<div class="bg-green-500 p-4 h-20">Item 4</div>
<div class="bg-green-300 p-4 self-baseline">Item 5</div>
<div class="bg-green-500 p-4 h-20">Item 6</div>
</div>
</body>
</html>
