Tailwind CSS - Place Items
Tailwind CSS Place Items 是一个实用类，用于同时对齐项目和对齐布局。
Tailwind CSS Place Items 类
以下是 Tailwind CSS Place Items 类的列表，这些类有助于有效对齐弹性项目和网格项目。
| 类 | CSS 属性 |
|---|---|
| place-items-start | place-items: start; |
| place-items-end | place-items: end; |
| place-items-center | place-items: center; |
| place-items-baseline | place-items: baseline; |
| place-items-stretch | place-items: stretch; |
Tailwind CSS 放置项目类的功能
- place-items-start: 此类替换 CSS place-items: start; 属性。此类用于将项目放置在其弹性区域和网格区域的起始位置(两个轴)。
- place-items-end: 此类替换 CSS place-items: end; 属性。此类用于将项目放置在其弹性区域和网格区域的终止位置(两个轴)。
- place-items-center: 此类替换 CSS place-items: center; 属性。此类用于将项目放置在其弹性区域和网格区域在两个轴上的中心位置。
- place-items-baseline: 此类替换 CSS place-items: baseline; 属性。此类用于将项目放置在其弹性区域和网格区域在两个轴上的基线位置。
- place-items-stretch: 此类替换 CSS place-items: stretch; 属性。此类用于沿两个轴拉伸 flex 和 grid 项，以填充可用空间。
Tailwind CSS Place Items 类示例
以下示例将说明 Tailwind CSS Place Items 类的实用功能。
网格项起始对齐
place-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 Place Items Start Class
</h2>
<div class="grid grid-cols-3 gap-2 p-1 h-44">
<div class="border-2 border-green-500 p-1 grid
place-items-start bg-green-300">
<div class="bg-orange-500 p-4">
Item 1
</div>
</div>
<div class="border-2 border-green-500 p-1 grid
place-items-start bg-green-300">
<div class="bg-blue-500 p-4">
Item 2
</div>
</div>
<div class="border-2 border-green-500 p-1 grid
place-items-start bg-green-300">
<div class="bg-pink-500 p-4">
Item 3
</div>
</div>
</div>
</body>
</html>
网格项目末端对齐
place-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 Place Items End Class
</h2>
<div class="grid grid-cols-3 gap-2 p-1 h-44">
<div class="border-2 border-green-500 p-1 grid
place-items-end bg-green-300">
<div class="bg-orange-500 p-4">
Item 1
</div>
</div>
<div class="border-2 border-green-500 p-1 grid
place-items-end bg-green-300">
<div class="bg-blue-500 p-4">
Item 2
</div>
</div>
<div class="border-2 border-green-500 p-1 grid
place-items-end bg-green-300">
<div class="bg-pink-500 p-4">
Item 3
</div>
</div>
</div>
</body>
</html>
网格项目中心对齐
place-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 Place Items Center Class
</h2>
<div class="grid grid-cols-3 gap-2 p-1 h-44">
<div class="border-2 border-green-500 p-1 grid
place-items-center bg-green-300">
<div class="bg-orange-500 p-4">
Item 1
</div>
</div>
<div class="border-2 border-green-500 p-1 grid
place-items-center bg-green-300">
<div class="bg-blue-500 p-4">
Item 2
</div>
</div>
<div class="border-2 border-green-500 p-1 grid
place-items-center bg-green-300">
<div class="bg-pink-500 p-4">
Item 3
</div>
</div>
</div>
</body>
</html>
弹性项目基线对齐
place-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 Place Items Baseline Class
</h2>
<div class="flex gap-3 p-1 h-44">
<div class="border-2 border-green-500 p-1 flex
place-items-baseline bg-green-300">
<div class="bg-red-500 p-3">
Item 1
</div>
</div>
<div class="border-2 border-green-500 p-1 flex
place-items-baseline bg-green-300">
<div class="bg-blue-500 p-3">
Item 2
</div>
</div>
<div class="border-2 border-green-500 p-1 flex
place-items-baseline bg-green-300">
<div class="bg-green-500 p-3">
Item 3
</div>
</div>
</div>
</body>
</html>
弹性项目拉伸对齐
place-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 Place Items Stretch Class
</h2>
<div class="flex gap-3 p-1 h-44">
<div class="border-2 border-green-500 p-1 flex
place-items-stretch bg-green-300">
<div class="bg-red-500 p-3">
Item 1
</div>
</div>
<div class="border-2 border-green-500 p-1 flex
place-items-stretch bg-green-300">
<div class="bg-blue-500 p-3">
Item 2
</div>
</div>
<div class="border-2 border-green-500 p-1 flex
place-items-stretch bg-green-300">
<div class="bg-green-500 p-3">
Item 3
</div>
</div>
</div>
</body>
</html>
