css框架Tailwind Flex工具类如何使用-css教程-PHP中文网

css框架Tailwind Flex工具类如何使用

P粉602998670

发布： 2025-10-06 13:57:02

原创

214人浏览过

Tailwind CSS提供flex、inline-flex等类创建弹性容器，通过flex-row、flex-col控制方向，justify-和items-实现主轴与交叉轴对齐，结合flex-1、flex-none等控制子元素伸缩，快速构建响应式布局。

css框架tailwind flex工具类如何使用

Tailwind CSS 提供了一套强大的 Flexbox 工具类，可以快速实现灵活的布局结构，无需写自定义 CSS。通过组合这些工具类，你能轻松控制容器的主轴方向、对齐方式、子元素分布等。

设置 Flex 容器

要启用 Flex 布局，使用 flex 类将元素变为 flex 容器。

• flex：创建一个块级 flex 容器
• inline-flex：创建一个行内 flex 容器

示例：

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

登录后复制

控制主轴方向

使用 flex-row、flex-col 等类设置主轴方向。

立即学习“前端免费学习笔记（深入）”；

• flex-row：从左到右排列（默认）
• flex-row-reverse：从右到左排列
• flex-col：从上到下排列
• flex-col-reverse：从下到上排列

示例：垂直排列按钮

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

查看详情

<div class="flex flex-col">
  <button>保存</button>
  <button>取消</button>
</div>

登录后复制

主轴与交叉轴对齐

控制子元素在主轴和交叉轴上的对齐方式。

主轴对齐（justify-*）
• justify-start：左对齐（默认）
• justify-end：右对齐
• justify-center：居中对齐
• justify-between：两端对齐，中间间距相等
• justify-around：每个项目周围有相等空间
• justify-evenly：所有项目间隔完全均等 交叉轴对齐（items-*）
• items-start：顶部对齐
• items-center：居中对齐
• items-end：底部对齐
• items-stretch：拉伸填满容器（默认）

示例：水平居中 + 垂直居中

<div class="flex justify-center items-center h-64">
  <span>居中内容</span>
</div>

登录后复制

控制子元素行为

使用 flex- 前缀类控制子项的伸缩性。

• flex-1：子项占据剩余空间（常用作“自动填充”）
• flex-auto：可伸缩，基于内容大小分配空间
• flex-initial：不伸缩，按内容大小显示
• flex-none：完全不可伸缩

示例：侧边栏固定宽度，主内容区域自适应

<div class="flex">
  <aside class="w-64">侧边栏</aside>
  <main class="flex-1">主要内容</main>
</div>

登录后复制

基本上就这些。Tailwind 的 Flex 工具类覆盖了日常布局的绝大多数需求，组合灵活，上手快。多试几次就能熟练掌握常见布局模式。

以上就是css框架Tailwind Flex工具类如何使用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css框架Tailwind与自定义样式如何结合如何用css框架Tailwind实现按钮组响应式布局如何用css tailwind实现实用工具类快速布局如何用css Tailwind快速实现响应式设计 Tailwind的dark mode策略对比：class模式与media查询模式如何选择？