Tailwind CSS - 自对齐

Tailwind CSS 自对齐是一个实用程序类，用于沿其容器的交叉轴对齐单个网格和 flex 项目。

Tailwind CSS 自对齐类

以下是Tailwind CSS 自对齐类的列表，这些类有助于有效地单独沿其交叉轴对齐网格和 flex 项目。

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

Tailwind CSS 自对齐类的功能

self-auto: 此类替换 CSS align-self: auto; 属性。它用于根据其父容器元素的align-items属性的值对齐项目。
self-start: 此类替换 CSS align-self: flex-start; 属性。它用于将单个项目定位在容器交叉轴的开头，而不管容器的align-items值如何。
self-end: 此类替换 CSS align-self: flex-end; 属性。它用于将单个项目定位在容器交叉轴的末尾，而不管容器的align-items值如何。
self-center: 此类替换 CSS align-self: center; 属性。它用于将单个项目定位在容器交叉轴的中心，而不管容器的align-items值如何。
self-stretch: 此类替换 CSS align-self: stretch; 属性。它会拉伸单个项目以填充其容器交叉轴中的可用空间，而不管容器的align-items值如何。
self-baseline: 此类替换 CSS align-self: baseline; 属性。它用于将单个项目定位在容器交叉轴的基线处，而不管容器的align-items值如何。

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 的 Align Self 类实用程序。

Flex 项目的自动对齐

self-auto 类将各个项目设置为根据容器的 align-items 属性的值进行定位，如下例所示。

示例

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 Self Auto Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        
        <!--The self-auto class enable individual item to align -->
        <!-- itself based on the align-items property of parent grid container-->
        
        <div class="bg-green-500 p-4 w-28 self-auto">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>

Flex 项目起始对齐

self-start 类将各个项目设置为定位到容器横轴的起始位置，如下例所示。

示例

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 Self Start 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-300 p-4 w-28 self-start">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>

Flex 项目结束对齐

self-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 Self End 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-300 p-4 w-28 self-end">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>

Grid 项目居中对齐

self-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 Self Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-4 h-36">Item 1</div>
        <div class="bg-green-300 p-4 h-24 self-center">Item 2</div>
        <div class="bg-green-500 p-4 h-36">Item 3</div>
        <div class="bg-green-500 p-4 h-36">Item 4</div>
        <div class="bg-green-300 p-4 h-24 self-center">Item 5</div>
        <div class="bg-green-500 p-4 h-36">Item 6</div>
    </div>
</body>

</html>

Flex 项目拉伸对齐

self-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 Self 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-300 p-4 w-28 self-stretch">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>

Grid 项目基线对齐

self-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 Self Baseline Class
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-4 h-20">Item 1</div>
        <div class="bg-green-300 p-4 self-baseline">Item 2</div>
        <div class="bg-green-500 p-4 h-20">Item 3</div>
        <div class="bg-green-500 p-4 h-20">Item 4</div>
        <div class="bg-green-300 p-4 self-baseline">Item 5</div>
        <div class="bg-green-500 p-4 h-20">Item 6</div>
    </div>
</body>

</html>

打印页面