Tailwind CSS on GitHub

Flex

用于控制 flex 项目放大和缩小的功能类。

Default class reference

Class
Properties
flex-1flex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;

Initial

使用 flex-initial 允许 flex 项目在考虑到其初始尺寸的情况下缩小但不放大:

Items don't grow when there's extra space

Short
Medium length

Items shrink if possible when needed

Short
Medium length
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
<div class="flex">
  <div class="flex-initial ...">
    <!-- Won't grow, but will shrink if needed -->
  </div>
  <div class="flex-initial ...">
    <!-- Won't grow, but will shrink if needed -->
  </div>
  <div class="flex-initial ...">
    <!-- Won't grow, but will shrink if needed -->
  </div>
</div>

Flex 1

使用 flex-1 允许 flex 项目根据需要放大和缩小,忽略其初始尺寸。

Default behavior

Short
Medium length
Significantly larger amount of content

With .flex-1

Short
Medium length
Significantly larger amount of content
<div class="flex">
  <div class="flex-1 ...">
    <!-- Will grow and shrink as needed without taking initial size into account -->
  </div>
  <div class="flex-1 ...">
    <!-- Will grow and shrink as needed without taking initial size into account -->
  </div>
  <div class="flex-1 ...">
    <!-- Will grow and shrink as needed without taking initial size into account -->
  </div>
</div>

Auto

使用 flex-auto 允许一个 flex 项目在考虑到其初始大小的情况下放大和缩小:

Default behavior

Short
Medium length
Significantly larger amount of content

With .flex-auto

Short
Medium length
Significantly larger amount of content
<div class="flex ...">
  <div class="flex-auto ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
  <div class="flex-auto ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
  <div class="flex-auto ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
</div>

None

使用 flex-none 来阻止一个 flex 项目的放大和缩小:

Item that can grow or shrink if needed
Item that cannot grow or shrink
Item that can grow or shrink if needed
<div class="flex ...">
  <div class="flex-1 ...">
    <!-- Will grow and shrink as needed -->
  </div>
  <div class="flex-none ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
  <div class="flex-1 ...">
    <!-- Will grow and shrink as needed -->
  </div>
</div>

响应式

要控制 flex 项目在特定断点处的放大和缩小方式,可在任何现有的功能类产添加 {screen}: 前缀。例如,使用 md:flex-1 仅在中等尺寸及以上的屏幕应用 flex-1 功能。

<div class="flex ...">
  <!-- ... -->
  <div class="flex-none md:flex-1 ...">
    Responsive flex item
  </div>
  <!-- ... -->
</div>

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

定制

Flex Values

默认情况下,Tailwind 提供了四个 flex 功能类。您可以通过编辑您的 Tailwind 配置的 theme.flex 部分来改变、添加或删除这些功能类。

  // tailwind.config.js
  module.exports = {
    theme: {
      flex: {
        '1': '1 1 0%',
        auto: '1 1 auto',
-       initial: '0 1 auto',
+       inherit: 'inherit',
        none: 'none',
+       '2': '2 2 0%',
      }
    }
  }

变体

默认情况下, 针对 flex 功能类,只生成 responsive 变体。

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

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

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

禁用

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

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