Tailwind CSS - 內容佈局

上一頁
下一頁

Tailwind CSS 內容佈局 (Place Content) 是一個用於同時調整內容對齊方式和排列方式的實用類。

Tailwind CSS 內容佈局類

以下是Tailwind CSS 內容佈局 (Place Content) 類列表，它們有助於有效地對齊 flex 和 grid 專案。

類名 CSS 屬性
place-content-center place-content: center;
place-content-start place-content: start;
place-content-end place-content: end;
place-content-between place-content: space-between;
place-content-around place-content: space-around;
place-content-evenly place-content: space-evenly;
place-content-baseline place-content: baseline;
place-content-stretch place-content: stretch;

Tailwind CSS 內容佈局類的功能

  • place-content-center: 此類替換 CSS place-content: center; 屬性。此類用於將內容放置在塊軸的中心。
  • place-content-start: 此類替換 CSS place-content: start; 屬性。此類用於將內容放置在塊軸的起始位置。
  • place-content-end: 此類替換 CSS place-content: end; 屬性。此類用於將內容放置在塊軸的結束位置。
  • place-content-between: 此類替換 CSS place-content: space-between; 屬性。此類用於沿塊軸放置內容，各專案之間留有相等的間距。
  • place-content-around: 此類替換 CSS place-content: space-around; 屬性。此類用於沿塊軸放置內容，各專案周圍留有相等的間距。
  • place-content-evenly: 此類替換 CSS place-content: space-evenly; 屬性。此類用於沿塊軸放置內容，各專案之間以及專案與邊緣之間留有相等的間距。
  • place-content-baseline: 此類替換 CSS place-content: baseline; 屬性。此類沿容器的塊軸放置內容，使其基線對齊。
  • place-content-stretch: 此類替換 CSS place-content: stretch; 屬性。此類用於拉伸內容以填充其容器的可用空間。

Tailwind CSS 內容佈局類示例

以下示例將說明 Tailwind CSS 內容佈局類的實用程式。

網格專案居中對齊

place-content-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 Content Center Class
    </h2>
    <div class="grid grid-cols-2 gap-4 bg-lime-300 
                h-56 place-content-center">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
</body>

</html>

Flex 專案起始和結束對齊

place-content-start 和 place-content-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 Content Start Class
    </h2>
    <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-start mb-3">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Content End Class
    </h2>
    <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-end">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
</body>

</html>

網格專案之間和周圍對齊

place-content-between 和 place-content-around 類將內容定位在塊軸上，使其在各行之間和各行周圍具有相等的距離，如下例所示。

示例

<!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 Content Between Class
    </h2>
    <div class="grid grid-cols-2 bg-lime-300 gap-4
                h-44 place-content-between mb-3">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Content Around Class
    </h2>
    <div class="grid grid-cols-2 bg-lime-300 gap-4
                h-44 place-content-around">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
</body>

</html>

Flex 專案均勻和基線對齊

place-content-evenly 和 place-content-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 Content Evenly Class
    </h2>
    <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-evenly mb-3">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Content Baseline Class
    </h2>
        <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-baseline">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
</body>

</html>

網格專案拉伸對齊

place-content-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 Content Stretch Class
    </h2>
    <div class="grid grid-cols-2 bg-lime-300 gap-4
                h-44 place-content-stretch mb-3">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.