Tailwind CSS - Align Content
Tailwind CSS Align Content 是一个实用类，用于在多行弹性容器和网格容器中沿横轴定位行。
Tailwind CSS Align Content 类
以下是 Tailwind CSS Align Content 类的列表，这些类有助于有效地沿横轴对齐弹性容器和网格容器项。
| 类 | CSS 属性 |
|---|---|
| content-normal | align-content: normal; |
| content-center | align-content: center; |
| content-start | align-content: flex-start; |
| content-end | align-content: flex-end; |
| content-between | align-content: space-between; |
| content-around | align-content: space-around; |
| content-evenly | align-content: space-evenly; |
| content-baseline | align-content: baseline; |
| content-stretch | align-content: stretch; |
Tailwind CSS 对齐内容类的功能
- content-normal:此类的默认行为是正常对齐项目，就像未设置 align-content 属性一样。
- content-center:此类用于将项目与横轴的中心对齐。
- content-start:此类用于将项目与横轴的起点对齐。
- content-end:此类用于将项目与横轴的终点对齐。
- content-between:此类用于沿横轴对齐项目，并使每个项目之间的间距相等。
- content-around:此类用于沿横轴对齐项目，并使每个项目周围的间距相等。
- content-evenly:此类使项目沿横轴对齐，并且每个项目之间和周围的间距相等。
- content-baseline 此类用于使项目沿其基线对齐。
- content-stretch 此类拉伸 flex 或 grid 项目以填充容器中的可用空间。
Tailwind CSS 对齐内容类示例
以下示例将说明 Tailwind CSS 对齐内容类的实用功能。
默认对齐网格项目
content-normal 类设置项目的默认定位，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Content Normal Class
</h2>
<div class="grid grid-cols-3 gap-4 h-56 content-normal
bg-lime-200">
<div class="bg-green-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">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>
居中对齐网格项
content-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 Content Center Class
</h2>
<div class="grid grid-cols-3 gap-4 h-56 content-center
bg-lime-200">
<div class="bg-green-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">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>
起始和终止对齐的弹性项目
content-start 和 content-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 Align Content Start Class
</h2>
<div class="flex flex-wrap gap-4 h-48 content-start
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>
<br>
<h2 class="text-2xl mb-3">
Tailwind CSS Content End Class
</h2>
<div class="flex flex-wrap gap-4 h-48 content-end
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>
网格项目之间和周围对齐
content-between 和 content-around 类设置网格项目沿横轴的行，每个网格项目之间和周围的间距相等，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Content between Class
</h2>
<div class="grid grid-cols-3 gap-4 h-48 content-between
bg-lime-200">
<div class="bg-green-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">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>
<br>
<h2 class="text-2xl mb-3">
Tailwind CSS Content Around Class
</h2>
<div class="grid grid-cols-3 gap-4 h-48 content-around
bg-lime-200">
<div class="bg-green-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">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>
均匀对齐和基线对齐的弹性项目
content-evenly 和 content-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 Content Evenly Class
</h2>
<div class="flex flex-wrap gap-4 h-48 content-evenly
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>
<br>
<h2 class="text-2xl mb-3">
Tailwind CSS Content Baseline Class
</h2>
<div class="flex flex-wrap gap-4 h-48 content-baseline
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>
拉伸网格项
content-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 Content Stretch Class
</h2>
<div class="grid grid-cols-3 gap-4 h-48 content-stretch
bg-lime-200">
<div class="bg-green-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">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>
