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; 属性。此类用于拉伸内容以填充其容器的可用空间。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 内容布局类示例

以下示例将说明 Tailwind CSS 内容布局类的实用程序。

网格项目居中对齐

place-content-center 类将内容定位在块轴的中心，如下例所示。

示例

Open Compiler
<!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 类将内容分别定位在块轴的起始和结束位置，如下例所示。

示例

Open Compiler
<!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 类将内容定位在块轴上，使其在各行之间和各行周围具有相等的距离，如下例所示。

示例

Open Compiler
<!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 类将内容沿块轴线均匀定位，并对齐基线，如下例所示。

示例

Open Compiler
<!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 类将内容拉伸以填充沿块轴线的可用空间，如下例所示。

示例

Open Compiler
<!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>
打印页面
上一页
下一页
广告