Tailwind CSS - 对齐内容
Tailwind CSS 对齐内容 是一个实用类，用于沿主轴或水平面对齐弹性项目和网格项目。
Tailwind CSS 对齐内容类
以下是 Tailwind CSS justify-content 对齐内容 类的列表，这些类有助于有效地沿主轴对齐弹性项目和网格项目。
| 类 | CSS 属性 |
|---|---|
| justify-normal | justify-content: normal; |
| justify-start | justify-content: flex-start; |
| justify-end | justify-content: flex-end; |
| justify-center | justify-content: center; |
| justify-between | justify-content: space-between; |
| justify-around | justify-content: space-around; |
| justify-evenly | justify-content: space-evenly; |
| justify-stretch | justify-content: stretch; |
Tailwind CSS Justify 内容类的功能
- justify-normal:此类的默认行为是根据文本的方向正常对齐项目。
- justify-start:此类用于将项目与其容器的起始位置对齐。
- justify-end:此类用于将项目与其容器的末尾位置对齐。
- justify-center:此类用于将项目与其容器的中心对齐。
- justify-between:此类用于将项目沿主轴对齐，并且每个项目之间的间距相等。
- justify-around:此类用于将项目沿主轴对齐，并且每个项目周围的间距相等。
- justify-evenly:此类将项目沿主轴对齐，并使每个项目与容器边缘之间的间距相等。
- justify-stretch:此类会拉伸 flex 或 grid 项目，使其填充容器中的可用空间，同时保持其宽高比。
Tailwind CSS Justify Content Classes 示例
以下示例将说明 Tailwind CSS Justify Content Classes 的实用功能。
Flex 项目正常对齐
justify-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 Justify Normal Class
</h2>
<div class="flex justify-normal gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20 w-20">1</div>
<div class="bg-blue-400 h-20 w-20">2</div>
</div>
</body>
</html>
弹性项目起始和终止对齐
justify-start 和 justify-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 Start Class
</h2>
<div class="flex justify-start gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20 w-20">1</div>
<div class="bg-blue-400 h-20 w-20">2</div>
</div>
<br>
<h2 class="text-2xl mb-3">
Tailwind CSS Justify End Class
</h2>
<div class="flex justify-end gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20 w-20">1</div>
<div class="bg-blue-400 h-20 w-20">2</div>
</div>
</body>
</html>
弹性项目居中对齐
justify-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 Center Class
</h2>
<div class="flex justify-center gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20 w-20">1</div>
<div class="bg-blue-400 h-20 w-20">2</div>
</div>
</body>
</html>
弹性项目之间和周围对齐
justify-between 和 justify-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 Justify Between Class
</h2>
<div class="flex justify-between gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20 w-20">1</div>
<div class="bg-blue-400 h-20 w-20">2</div>
</div>
<br>
<h2 class="text-2xl mb-3">
Tailwind CSS Justify Around Class
</h2>
<div class="flex justify-around gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20 w-20">1</div>
<div class="bg-blue-400 h-20 w-20">2</div>
</div>
</body>
</html>
弹性项目均匀对齐
justify-evenly 类设置项目之间的均匀间距，如下例所示。
示例
<!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 Evenly Class
</h2>
<div class="flex justify-evenly gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20 w-20">1</div>
<div class="bg-blue-400 h-20 w-20">2</div>
</div>
</body>
</html>
网格项目拉伸对齐
justify-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 Stretch Class
</h2>
<div class="grid grid-flow-col justify-stretch gap-x-3
border-2 border-green-500 p-4">
<div class="bg-pink-400 h-20">1</div>
<div class="bg-blue-400 h-20">2</div>
</div>
</body>
</html>
