使用 Tailwind CSS 的 Flex 和 Gap 工具类，可以快速构建灵活、响应式的布局，无需写任何自定义 CSS。核心在于利用 flex 容器和 gap 间距类来控制子元素的排列与间隔。
启用 Flex 布局
通过 flex 类将一个元素变为弹性容器。默认主轴为横向（row），你可以根据需要调整方向。
常见用法：- flex：创建行内弹性容器
- flex-col：纵向排列子元素
- flex-wrap：允许换行
- justify-center：主轴居中对齐
- items-center：交叉轴居中对齐
示例：横向居中对齐按钮组
<div class="flex justify-center space-x-4"> <button>保存</button> <button>取消</button> </div>
使用 Gap 控制间距
Gap 类（如 gap-4）能为 flex 容器内的子元素之间添加一致的间距，比传统的 space-x 更直观且支持二维布局。
立即学习“前端免费学习笔记（深入）”；
关键点：
- gap-2、gap-4、gap-6 等对应不同间距（单位为 rem）
- 支持 gap-x-4（仅水平）、gap-y-2（仅垂直）
- 在 grid 和 flex 布局中都有效
示例：带间距的卡片列表
<div class="flex flex-col gap-4"> <div class="bg-gray-100 p-4">卡片 1</div> <div class="bg-gray-100 p-4">卡片 2</div> <div class="bg-gray-100 p-4">卡片 3</div> </div>
响应式布局组合技巧
结合响应式前缀（如 md:flex、gap-2 md:gap-6），可轻松实现不同屏幕下的布局变化。
实用场景：- 移动端纵向堆叠，桌面端横向排列
- 小屏紧凑间距，大屏宽松布局
示例：响应式表单字段
<div class="flex flex-col md:flex-row gap-4 md:gap-8"> <input type="text" placeholder="姓名" class="flex-1"/> <input type="email" placeholder="邮箱" class="flex-1"/> </div>
基本上就这些。熟练使用 flex 方向、对齐方式和 gap 间距，就能用 Tailwind 快速搭建大多数常见布局，代码简洁又易于维护。
