Tailwind CSS - 專案放置

上一個
下一個

Tailwind CSS 專案放置是一個用於同時對齊和對齊專案的實用程式類。

Tailwind CSS 專案放置類

以下是Tailwind CSS 專案放置類列表，有助於有效地對齊 flex 和 grid 專案。

類 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; 屬性。此類用於將專案放置在其 flex 和網格區域的兩個軸上的開頭。
  • place-items-end: 此類替換 CSS place-items: end; 屬性。此類用於將專案放置在其 flex 和網格區域的兩個軸上的末尾。
  • place-items-center: 此類替換 CSS place-items: center; 屬性。此類用於將專案放置在其 flex 和網格區域的兩個軸上的中心。
  • place-items-baseline: 此類替換 CSS place-items: baseline; 屬性。此類用於將專案放置在其 flex 和網格區域的兩個軸上的基線。
  • place-items-stretch: 此類替換 CSS place-items: stretch; 屬性。此類用於沿兩個軸拉伸 flex 和網格專案以填充可用空間。

Tailwind CSS 專案放置類示例

以下示例將說明 Tailwind CSS 專案放置類的實用程式。

網格專案開始對齊

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>

Flex 專案基線對齊

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>

Flex 專案拉伸對齊

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>
列印頁面
上一個
下一個
廣告