Tailwind CSS提供flex、inline-flex等类创建弹性容器，通过flex-row、flex-col控制方向，justify-和items-实现主轴与交叉轴对齐，结合flex-1、flex-none等控制子元素伸缩，快速构建响应式布局。
Tailwind CSS 提供了一套强大的 Flexbox 工具类，可以快速实现灵活的布局结构，无需写自定义 CSS。通过组合这些工具类，你能轻松控制容器的主轴方向、对齐方式、子元素分布等。
设置 Flex 容器
要启用 Flex 布局，使用 flex 类将元素变为 flex 容器。
• flex：创建一个块级 flex 容器• inline-flex：创建一个行内 flex 容器
示例：
Item 1Item 2Item 3
控制主轴方向
使用 flex-row、flex-col 等类设置主轴方向。
立即学习“前端免费学习笔记（深入）”；
• flex-row：从左到右排列（默认）• flex-row-reverse：从右到左排列
• flex-col：从上到下排列
• flex-col-reverse：从下到上排列
示例：垂直排列按钮
JTBC网站内容管理系统5.0.3.1
下载
JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也
主轴与交叉轴对齐
控制子元素在主轴和交叉轴上的对齐方式。
主轴对齐（justify-*）• justify-start：左对齐（默认）
• justify-end：右对齐
• justify-center：居中对齐
• justify-between：两端对齐，中间间距相等
• justify-around：每个项目周围有相等空间
• justify-evenly：所有项目间隔完全均等 交叉轴对齐（items-*）
• items-start：顶部对齐
• items-center：居中对齐
• items-end：底部对齐
• items-stretch：拉伸填满容器（默认）
示例：水平居中 + 垂直居中
居中内容
控制子元素行为
使用 flex- 前缀类控制子项的伸缩性。
• flex-1：子项占据剩余空间（常用作“自动填充”）• flex-auto：可伸缩，基于内容大小分配空间
• flex-initial：不伸缩，按内容大小显示
• flex-none：完全不可伸缩
示例：侧边栏固定宽度，主内容区域自适应
主要内容
基本上就这些。Tailwind 的 Flex 工具类覆盖了日常布局的绝大多数需求，组合灵活，上手快。多试几次就能熟练掌握常见布局模式。
