【Tailwind CSS】flex- 类详解

最新推荐文章于 2025-02-18 14:17:09 发布

Peter-Lu

最新推荐文章于 2025-02-18 14:17:09 发布

阅读量1.5k

点赞数 15

分类专栏： # Tailwind 文章标签： css 前端 ecmascript typescript javascript

本文链接：https://blog.csdn.net/lph159/article/details/143835163

版权

Tailwind 专栏收录该内容

44 篇文章

订阅专栏

文章目录

flex- 类是 Tailwind CSS 中用于控制弹性布局的重要工具，通过它可以灵活地安排容器中的子元素位置、排列方向、换行行为以及弹性比例。本文将详细介绍 flex、flex-row、flex-col、flex-wrap 和 flex-数字 等类名的作用，帮助你轻松实现高效、响应式的页面布局。

一、flex：激活弹性布局

flex 类用于将容器设置为弹性布局容器，使其子元素能够使用 Flexbox 布局特性。这是所有 flex- 系列类名的基础。

<div class="flex bg-gray-100 p-4">
  <div class="p-2 bg-blue-500">子元素 1</div>
  <div class="p-2 bg-blue-500">子元素 2</div>
  <div class="p-2 bg-blue-500">子元素 3</div>
</div>

上面的代码将容器设置为弹性布局，子元素会水平排列（默认行为）。通过添加 flex 类，容器及其子元素便可以使用 Flexbox 的各种布局功能。

二、flex-row 和 flex-col：控制子元素的排列方向

flex-row：子元素在主轴（水平）方向排列，从左到右布局。
flex-col：子元素在交叉轴（垂直）方向排列，从上到下布局。

这两个类名可以灵活切换子元素的排列方向，适合不同的布局需求。

<!-- 水平排列 -->
<div class="flex flex-row bg-gray-100 p-4">
  <div class="p-2 bg-green-500">水平排列 1</div>
  <div class="p-2 bg-green-500">水平排列 2</div>
  <div class="p-2 bg-green-500">水平排列 3</div>
</div>

<!-- 垂直排列 -->
<div class="flex flex-col bg-gray-100 p-4 mt-4">
  <div class="p-2 bg-green-500">垂直排列 1</div>
  <div class="p-2 bg-green-500">垂直排列 2</div>
  <div class="p-2 bg-green-500">垂直排列 3</div>
</div>

实际应用场景

水平排列：适合导航栏、标签栏等。
垂直排列：适合侧边栏、菜单栏、信息列表等。

三、flex-wrap 和 flex-nowrap：控制子元素是否换行

flex-wrap：允许子元素换行。如果子元素的宽度总和超出容器宽度，它们会自动换行。
flex-nowrap：不允许子元素换行（默认行为），适合需要子元素保持在一行的布局。

通过 flex-wrap 类名，子元素可以根据容器宽度自动换行，提升了布局的灵活性。

<div class="flex flex-wrap bg-gray-100 p-4">
  <div class="w-1/3 p-2 bg-yellow-500">子元素 1</div>
  <div class="w-1/3 p-2 bg-yellow-500">子元素 2</div>
  <div class="w-1/3 p-2 bg-yellow-500">子元素 3</div>
  <div class="w-1/3 p-2 bg-yellow-500">子元素 4</div>
</div>

在这个例子中，添加 flex-wrap 后，当子元素宽度超出容器宽度时，子元素会自动换行，展示更多内容。

实际应用场景

多行展示：如图文列表、卡片布局等，适合在不同屏幕尺寸下自动调整。
不换行：如导航栏、标签栏，子元素在同一行展示更符合设计需求。

四、flex-数字类：设置子元素的弹性比例

flex- 数字类用于控制子元素在容器中占用的弹性比例。通过设置不同的 flex- 数字，子元素可以按比例分配容器空间，这种方式适合实现灵活的多列布局。

flex-1：将子元素的比例设为等分，占据剩余空间。
flex-auto：根据内容大小自适应布局，占据最小空间并在有剩余空间时拉伸。
flex-initial：使用内容的默认宽度，不会占用额外的弹性空间。
flex-none：固定宽度，子元素不会根据容器调整大小。

1. 使用 flex-1 创建等分布局

<div class="flex bg-gray-100 p-4">
  <div class="flex-1 p-2 bg-blue-300">等分布局 1</div>
  <div class="flex-1 p-2 bg-blue-300">等分布局 2</div>
  <div class="flex-1 p-2 bg-blue-300">等分布局 3</div>
</div>

在这个例子中，flex-1 使每个子元素均等分占用容器空间，实现了三等分布局。无论容器宽度如何变化，子元素会自动调整大小，始终保持等分关系。

2. flex-auto：自适应内容宽度

<div class="flex bg-gray-100 p-4">
  <div class="flex-auto p-2 bg-green-300">自动宽度</div>
  <div class="p-2 bg-green-300">固定宽度</div>
</div>

在这个示例中，flex-auto 的子元素会根据内容调整宽度，并根据容器剩余空间进行伸展。

3. flex-initial 和 flex-none：设置固定宽度

<div class="flex bg-gray-100 p-4">
  <div class="flex-initial w-1/3 p-2 bg-red-300">固定宽度 1</div>
  <div class="flex-none w-1/4 p-2 bg-red-300">固定宽度 2</div>
  <div class="flex-1 p-2 bg-red-300">弹性占比</div>
</div>

flex-initial：保持自身内容宽度，不参与弹性伸缩。
flex-none：完全固定，不随容器调整。

实际应用场景

flex-1：适合多列等分布局，如网格、表格列等。
flex-auto：适用于子元素内容长度不确定的布局，保持合理的自适应宽度。
flex-initial 和 flex-none：适用于某些内容宽度固定的设计，如图标、按钮等。

五、综合应用示例

结合 flex、flex-row、flex-wrap 和 flex- 数字类，可以实现多种复杂布局：

<div class="flex flex-row flex-wrap bg-gray-200 p-4">
  <div class="flex-auto p-4 bg-blue-300">自动宽度元素</div>
  <div class="flex-none w-1/4 p-4 bg-green-300">固定宽度元素</div>
  <div class="flex-1 p-4 bg-red-300">等分宽度元素</div>
</div>