Tailwind CSS - 内容对齐

Tailwind CSS 内容对齐 是一个实用程序类，用于沿主轴或水平面对齐 flex 和 grid 项目。

Tailwind CSS 内容对齐类

以下是Tailwind CSS 内容对齐类列表，有助于有效地沿主轴对齐 flex 和 grid 项目。

类	CSS 属性
justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;

Tailwind CSS 内容对齐类的功能

justify-normal: 此类具有默认行为，根据文本方向正常对齐项目。
justify-start: 此类用于将项目对齐到其容器的开头。
justify-end: 此类用于将项目对齐到其容器的结尾。
justify-center: 此类用于将项目对齐到其容器的中心。
justify-between: 此类用于沿主轴对齐项目，项目之间留有相等的间距。
justify-around: 此类沿主轴对齐项目，项目周围留有相等的间距。
justify-evenly: 此类沿主轴对齐项目，项目之间以及项目与容器边缘之间留有相等的间距。
justify-stretch: 此类拉伸 flex 或 grid 项目以填充容器中的可用空间，同时保持其纵横比。

Tailwind CSS 内容对齐类示例

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

Flex 项目正常对齐

justify-normal 类设置项目的默认位置，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Normal Class
    </h2>
    <div class="flex justify-normal gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 项目开头和结尾对齐

justify-start 和 justify-end 类将 flex 项目定位在沿主轴的起始点和结束点，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Start Class
    </h2>
    <div class="flex justify-start gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify End Class
    </h2>
    <div class="flex justify-end gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 项目居中对齐

justify-center 类将 flex 项目定位在沿主轴的中心，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Center Class
    </h2>
    <div class="flex justify-center gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 项目之间和周围对齐

justify-between 和 justify-around 类设置 flex 项目，使它们沿主轴在项目之间和项目周围具有相等的间距，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Between Class
    </h2>
    <div class="flex justify-between gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Around Class
    </h2>
    <div class="flex justify-around gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex 项目均匀对齐

justify-evenly 类设置项目之间的均匀间距，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Evenly Class
    </h2>
    <div class="flex justify-evenly gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Grid 项目拉伸对齐

justify-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 Justify Stretch Class
    </h2>
    <div class="grid grid-flow-col justify-stretch gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20">1</div>
        <div class="bg-blue-400 h-20">2</div>
    </div>
</body>

</html>

打印页面