Tailwind CSS - 内容对齐

上一个
下一个

Tailwind CSS 内容对齐 是一种实用程序类，用于沿横轴在多行 Flex 容器和 Grid 容器中定位行。

Tailwind CSS 内容对齐类

以下是Tailwind CSS 内容对齐类的列表，这些类有助于有效地沿横轴对齐 Flex 和 Grid 项目。

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

Tailwind CSS 内容对齐类功能

  • content-normal: 此类具有默认行为，可以像未设置 align-content 属性一样正常对齐项目。
  • content-center: 此类用于将项目对齐到横轴的中心。
  • content-start: 此类用于将项目对齐到横轴的开头。
  • content-end: 此类用于将项目对齐到横轴的结尾。
  • content-between: 此类用于沿横轴对齐项目，并在每个项目之间留出相等的空间。
  • content-around: 此类沿横轴对齐项目，并在每个项目周围留出相等的空间。
  • content-evenly: 此类沿横轴对齐项目，并在每个项目之间和周围留出相等的空间。
  • content-baseline: 此类用于沿其基线对齐项目。
  • content-stretch: 此类会拉伸 Flex 或 Grid 项目以填充容器中的可用空间。

Tailwind CSS 内容对齐类示例

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

默认对齐的网格项目

content-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 Content Normal Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-56 content-normal
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

居中对齐的网格项目

content-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 Content Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-56 content-center
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

开始和结束对齐的 Flex 项目

content-start 和 content-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 Align Content Start Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-start
                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>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content End Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-end
                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>

网格项目之间的和周围的对齐

content-between 和 content-around 类将项目的行沿横轴设置，并在每个项目之间和周围留出相等的空间，如下面的示例所示。

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content between Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-between
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Around Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-around
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

均匀和基线对齐的 Flex 项目

content-evenly 和 content-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 Content Evenly Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-evenly
                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>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Baseline Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-baseline
                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>

拉伸的网格项目

content-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 Content Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>
打印页面

上一篇
下一篇
广告