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>

列印頁面