Tailwind CSS - Place Content

Tailwind CSS Place Content 是一个实用类，用于同时对齐内容。

Tailwind CSS Place Content 类

以下是 Tailwind CSS Place Content 类的列表，这些类有助于有效对齐弹性项目和网格项目。

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: base; 属性。此类用于沿容器的块轴放置内容，使其基线对齐。
• place-content-stretch: 此类替代 CSS place-content: stretch; 属性。此类用于拉伸内容以填充其容器的可用空间。

Tailwind CSS Place Content 类示例

以下示例将说明 Tailwind CSS Place Content 类的实用功能。

网格项目居中对齐

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>

弹性项目起始和结尾对齐

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>

弹性项目均匀分布与基线对齐

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>