Tailwind CSS - 项目对齐

Tailwind CSS 项目对齐 是一个实用程序类，用于沿容器的交叉轴定位 flex 和 grid 项目。

Tailwind CSS 项目对齐类

以下是Tailwind CSS 项目对齐类的列表，它们有助于有效地沿交叉轴对齐 flex 和 grid 项目。

类	CSS 属性
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

Tailwind CSS 项目对齐类的功能

items-start: 此类替换 CSS align-items: flex-start; 属性。此类用于将网格和 flex 项目对齐到交叉轴的起始位置。
items-end: 此类替换 CSS align-items: flex-end; 属性。此类用于将网格和 flex 项目对齐到交叉轴的结束位置。
items-center: 此类替换 CSS align-items: center; 属性。此类用于将网格和 flex 项目对齐到交叉轴的中心位置。
items-baseline 此类替换 CSS align-items: baseline; 属性。此类用于沿容器的交叉轴对齐网格和 flex 项目，以便所有基线对齐。
items-stretch: 此类替换 CSS align-items: stretch; 属性。此类以这样的方式拉伸网格和 flex 项目，以便填充沿容器交叉轴的所有可用空间。

Tailwind CSS 项目对齐类示例

以下示例将说明 Tailwind CSS 项目对齐类实用程序。

网格项目起始对齐

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 Items Start Class
    </h2>
    <div class="grid grid-cols-3 gap-4 items-start">
        <div class="bg-green-500 p-4 h-24">Item 1</div>
        <div class="bg-green-300 p-4 h-20">Item 2</div>
        <div class="bg-green-500 p-4 h-12">Item 3</div>
        <div class="bg-lime-500 p-4 h-24">Item 4</div>
        <div class="bg-lime-300 p-4 h-20">Item 5</div>
        <div class="bg-lime-500 p-4 h-12">Item 6</div>
    </div>
</body>

</html>

网格项目结束对齐

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 Items End Class
    </h2>
    <div class="grid grid-cols-3 gap-4 items-end">
        <div class="bg-green-500 p-4 h-24">Item 1</div>
        <div class="bg-green-300 p-4 h-20">Item 2</div>
        <div class="bg-green-500 p-4 h-12">Item 3</div>
        <div class="bg-lime-500 p-4 h-24">Item 4</div>
        <div class="bg-lime-300 p-4 h-20">Item 5</div>
        <div class="bg-lime-500 p-4 h-12">Item 6</div>
    </div>
</body>

</html>

Flex 项目居中对齐

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 Items Center Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-center
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
    </div>
</body>

</html>

Flex 项目基线对齐

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 Items Baseline Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-baseline
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
    </div>
</body>

</html>

Flex 项目拉伸对齐

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 Items Stretch Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
</body>

</html>

打印页面