Tailwind CSS - 自定位 (Place Self)

Tailwind CSS 自定位 (Place Self) 是一个实用程序类，用于同时调整和对齐单个项目。

Tailwind CSS 自定位类

以下是Tailwind CSS 自定位 (Place Self) 类别的列表，有助于有效地对齐 flex 和 grid 项目。

类名	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-auto: 此类替换 CSS place-self: auto; 属性。此类用于根据父容器的place-items属性的值来放置单个项目。
place-self-start: 此类替换 CSS place-self: start; 属性。此类用于将单个项目放置在其 flex 和 grid 区域两轴的起始位置。
place-self-end: 此类替换 CSS place-self: end; 属性。此类用于将单个项目放置在其 flex 和 grid 区域两轴的结束位置。
place-self-center: 此类替换 CSS place-self: center; 属性。此类用于将单个项目放置在其 flex 和 grid 区域两轴的中心位置。
place-self-stretch: 此类替换 CSS place-self: stretch; 属性。此类用于沿两轴拉伸 flex 和 grid 项目以填充可用空间。

Tailwind CSS 自定位类示例

以下示例将说明 Tailwind CSS 自定位类的实用程序。

网格项目自动对齐

place-self-auto 类将单个项目设置为放置在其 flex 和 grid 区域两轴的起始位置，如下例所示。

示例

<!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>

打印页面