Flex布局是一维弹性布局，用于单行或单列内子元素的顺序、对齐与空间分配；Grid布局是二维网格系统，适用于需精确行列控制的复杂布局如卡片列表与仪表盘。
直接在 HTML 标签上加 flex 或 grid 类就能启用对应布局，不用写一行 CSS。关键不是堆 class，而是理解它们的触发条件和组合逻辑。
Flex 布局：一维排列，适合导航、表单、按钮组
Flex 用来控制“一行或一列”内子元素的顺序、对齐和空间分配。
-
必须先加
flex（或inline-flex），否则其他 flex 类无效 - 主轴方向用
flex-row（默认）或flex-col；反向加-reverse - 主轴对齐靠
justify-系列：justify-center水平居中，justify-between两端对齐 - 交叉轴对齐靠
items-系列：items-center垂直居中（当主轴是水平时） - 子元素想占满剩余空间？加
flex-1；不想缩放？用flex-none
Grid 布局：二维网格，适合卡片列表、仪表盘、复杂表单
Grid 用来定义行和列的结构，再把内容放进格子，适合需要精确控制位置的场景。
-
必须同时加
grid和grid-cols-*，比如grid grid-cols-3；只写grid-cols-3不生效 - 列数可响应式切换：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3，断点要连续覆盖，避免中间视口错乱 - 间隙用
gap-4（等价于gap: 1rem），但它只在grid或flex容器里起作用 - 让某个子项跨两列？加
col-span-2；跨三行？用row-span-3 - 自定义轨道宽度（如侧边栏+主内容）可用方括号语法：
grid-cols-[240px_1fr]，需开启 JIT 模式
什么时候选 Flex，什么时候选 Grid？
看你要解决的问题维度：
立即学习“前端免费学习笔记（深入）”；
- 排几个按钮、对齐标题和操作按钮、做顶部导航栏 → 用 Flex
- 展示 6 张商品卡片、安排数据看板的多个模块、做多列表单 → 用 Grid
- 混合使用很常见：外层用 Grid 划分大区域，每个区域内部用 Flex 对齐内容
- 别硬套——比如用 Flex 实现三列等宽卡片，不如 Grid 直观；用 Grid 做单行按钮对齐，反而多写 class
避坑提醒：高频失效原因
- 写了
grid-cols-3却还是竖着堆叠？检查是否漏了grid -
gap-4没空隙？确认父容器是flex或grid，不是block - 响应式列数在平板上没变？补全断点，例如从
sm开始就写grid-cols-1 sm:grid-cols-2 -
col-span-2不跨列？确保它加在 Grid 直接子元素上，且父容器有至少 2 列轨道 - 文字撑破卡片？列定义推荐用
minmax(0, 1fr)，Tailwind 默认的grid-cols-3已内置该逻辑
