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