Tailwind CSS Flexbox 完整参考

介绍

Tailwind CSS 是一种现代的 CSS 框架，它提供了大量的实用工具类，让你可以快速搭建出美观、响应式的网页。其中，Flexbox 是一种用于进行灵活布局的 CSS 属性，Tailwind CSS 提供了丰富的 Flexbox 工具类，方便你快速实现各种布局需求。

本文将介绍 Tailwind CSS 提供的所有 Flexbox 工具类，包括用法、示例和常用组合方式，供广大开发者参考和使用。

用法

在 Tailwind CSS 中，Flexbox 工具类的名称格式为 flex-{属性值}，例如 flex-row、flex-wrap 等。所有的 Flexbox 工具类可以分为三类：容器类工具、项目类工具和自由类工具。

容器类工具为 Flexbox 布局的容器提供了相关的属性，例如 flex-row 用于设置容器为横向排列、flex-wrap 用于设置项目换行等。项目类工具为 Flexbox 容器中的每个项目提供了相关的属性，例如 flex-1 用于设置项目的伸缩比例、self-center 用于设置项目在交叉轴上居中对齐等。自由类工具可以根据需要进行灵活的组合和使用，例如 justify-between 用于设置项目沿主轴均匀分布。

以下是 Tailwind CSS 中常见的 Flexbox 工具类，更多工具类详见官方文档：

容器类

flex-row

用于设置容器为横向排列。

<div class="flex flex-row">...</div>

flex-row-reverse

用于设置容器为横向反排列。

<div class="flex flex-row-reverse">...</div>

flex-col

用于设置容器为纵向排列。

<div class="flex flex-col">...</div>

flex-col-reverse

用于设置容器为纵向反排列。

<div class="flex flex-col-reverse">...</div>

flex-wrap

用于设置项目换行。

<div class="flex flex-wrap">...</div>

flex-wrap-reverse

用于设置项目反向换行。

<div class="flex flex-wrap-reverse">...</div>

flex-no-wrap

用于禁止项目换行。

<div class="flex flex-no-wrap">...</div>

flex-1

允许子项目按比例分配父容器的所有可用空间。

<div class="flex flex-1">...</div>

flex-auto

允许子项目自适应父容器的空间，但不进行分配。

<div class="flex flex-auto">...</div>

flex-initial

将子项目设置为它们本来的大小。

<div class="flex flex-initial">...</div>

flex-none

强制子项目按其本来的大小来显示。

<div class="flex flex-none">...</div>

项目类

order-{n}

设置项目的排列顺序，n 为数字，数字越小排列越靠前，默认为 0。

<div class="flex flex-row">
  <div class="order-2">2</div>
  <div class="order-1">1</div>
  <div class="order-3">3</div>
</div>

flex-{n}

允许子项目按比例分配父容器的空间，n 为数字，数字越大分配的空间越多，默认为 0。

<div class="flex">
  <div class="flex-none">1</div>
  <div class="flex-1">2</div>
  <div class="flex-2">3</div>
</div>

self-start

让项目在交叉轴上顶部对齐。

<div class="flex items-center">
  <div class="self-start">1</div>
  <div class="self-center">2</div>
  <div class="self-end">3</div>
</div>

self-center

让项目在交叉轴上居中对齐。

<div class="flex items-center">
  <div class="self-start">1</div>
  <div class="self-center">2</div>
  <div class="self-end">3</div>
</div>

self-end

让项目在交叉轴上底部对齐。

<div class="flex items-center">
  <div class="self-start">1</div>
  <div class="self-center">2</div>
  <div class="self-end">3</div>
</div>

justify-start

让项目沿主轴左侧对齐。

<div class="flex justify-start">...</div>

justify-center

让项目沿主轴居中对齐。

<div class="flex justify-center">...</div>

justify-end

让项目沿主轴右侧对齐。

<div class="flex justify-end">...</div>

justify-between

让项目沿主轴均匀分布，第一个和最后一个项目分别对齐容器的左侧和右侧。

<div class="flex justify-between">...</div>

justify-around

让项目沿主轴均匀分布，并在每个项目两侧留出相等的空间。

<div class="flex justify-around">...</div>

自由类

flex-grow

允许子项目按比例分配父容器的可用空间。

<div class="flex">
  <div class="flex-grow">1</div>
  <div>2</div>
  <div class="flex-grow">3</div>
</div>

flex-shrink

允许子项目按比例缩小以适应父容器的空间。

<div class="flex">
  <div>1</div>
  <div class="flex-shrink">2</div>
  <div>3</div>
</div>

flex-no-grow

禁止子项目按比例分配父容器的可用空间。

<div class="flex">
  <div class="flex-no-grow">1</div>
  <div>2</div>
  <div class="flex-no-grow">3</div>
</div>

flex-no-shrink

禁止子项目按比例缩小以适应父容器的空间。

<div class="flex">
  <div>1</div>
  <div class="flex-no-shrink">2</div>
  <div>3</div>
</div>

self-stretch

让项目在交叉轴上拉伸以适应父容器的高度。

<div class="flex items-center">
  <div class="self-stretch">1</div>
  <div class="self-center">2</div>
  <div class="self-end">3</div>
</div>

组合使用

通过组合使用上述工具类，可以实现更多功能强大的布局方案：

<div class="flex flex-col h-screen">
  <div class="flex-1">1</div>
  <div class="flex-1 h-full flex flex-col justify-center">
    <div class="flex-1 justify-around">
      <div class="flex-auto">2</div>
      <div class="flex-auto">3</div>
      <div class="flex-auto">4</div>
    </div>
  </div>
  <div class="flex-1">5</div>
</div>

上述代码实现了一个全屏的纵向 Flexbox 布局，第二个项目为横向的 Flexbox 布局，内部包含三个项目，并且使它们沿着主轴均匀分布、交叉轴居中对齐。

总结

Flexbox 是一种功能强大的 CSS 布局方式，结合 Tailwind CSS 的强大工具类，可以快速实现响应式布局和各种炫酷的效果。通过本文的介绍，你现在已经可以熟练地使用 Tailwind CSS 提供的所有 Flexbox 工具类了。