Align Content

Default class reference

Class	Properties
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;

Start

使用 content-start 将容器中的行相对于交叉轴的起点开始排列。

<div class="h-48 flex flex-wrap content-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Center

使用 content-center 将容器中的行相对于交叉轴的中心开始排列。

<div class="h-48 flex flex-wrap content-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

End

使用 content-end 将容器中的行相对于交叉轴的终点开始排列。

<div class="h-48 flex flex-wrap content-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space between

使用 content-between 来分配容器中的行，使每行之间有相等的空间。

<div class="h-48 flex flex-wrap content-between ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space around

使用 content-around 将行分布在一个容器中，使每行周围有相等的空间。

<div class="h-48 flex flex-wrap content-around ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space evenly

Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around:

<div class="h-48 flex flex-wrap content-evenly ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Responsive

要在特定的断点处控制 flex 内容的对齐，可以在任何现有的功能类前添加 {screen}: 前缀。例如，使用 md:content-around 来仅在中等尺寸及以上的屏幕应用 content-around 功能。

<div class="content-start md:content-around ...">
  <!-- ... -->
</div>

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

定制

变体

默认情况下，针对 align-content 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 alignContent 属性来控制为 align-content 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       alignContent: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 align-content 功能，您可以通过在配置文件的 corePlugins 部分将 alignContent 属性设置为 false 来完全禁用它们：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     alignContent: false,
    }
  }