Tailwind CSS - Place Self
Tailwind CSS Place Self 是一个实用类，用于同时对齐各个项目。
Tailwind CSS Place Self 类
以下是 Tailwind CSS Place Self 类的列表，这些类有助于有效对齐弹性项目和网格项目。
| 类 | CSS 属性 |
|---|---|
| place-self-auto | place-self: auto; |
| place-self-start | place-self: start; |
| place-self-end | place-self: end; |
| place-self-center | place-self: center; |
| place-self-stretch | place-self: stretch; |
Tailwind CSS Place Self 类的功能
- place-self-auto:此类取代了 CSS 的 place-self: auto; 属性。 此类用于根据父容器的 place-items 属性值来放置单个项目。
- place-self-start:此类取代了 CSS 的 place-self: start; 属性。 此类用于将单个项目放置在其弹性区域和网格区域的起始位置(两个轴)。
- place-self-end:此类取代了 CSS 的 place-self: end; 属性。此 类用于将单个项目放置在其弹性区域和网格区域的两端。
- place-self-center: 此类替换了 CSS 的 place-self: center; 属性。此类用于将单个项目放置在其弹性区域和网格区域的两端。
- place-self-stretch: 此类替换了 CSS 的 place-self: stretch; 属性。此类用于沿两个轴拉伸弹性项目和网格项目，以填充可用空间。
Tailwind CSS Place Self 类示例
以下示例将说明 Tailwind CSS Place Self 类的实用功能。
网格项目自动对齐
place-self-auto 类将各个项目设置为在两个轴上都定位在其弹性项目和网格区域的起始位置，如下例所示。
示例
<!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 Self Auto Class
</h2>
<div class="border-2 border-green-500 grid
place-items-start bg-green-300
h-44 w-1/2 p-1 ">
<!-- The place-self-auto class is used to place
an individual items based on the value of their
parent container's place-items property. -->
<div class="bg-orange-500 p-4 place-self-auto">
Item 1
</div>
</div>
</body>
</html>
网格项目起始对齐
place-self-start 类根据父容器的 place-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 Place Self Start Class
</h2>
<div class="border-2 border-green-500 grid
place-items-start bg-green-300
h-44 w-1/2 p-1 ">
<!-- The place-self-start class is used to place
an individual items at the start of their flex
and grid areas on both axes-->
<div class="bg-orange-500 p-4 place-self-start">
Item 1
</div>
</div>
</body>
</html>
