一个容器应只用一种布局模型：Flex适用于一维线性排列，Grid适用于二维行列布局；混用会导致display值覆盖、对齐失效或子元素脱离布局流。
Flex 和 Grid 本身不冲突，真正出问题的是在同一个父容器上混用两套布局逻辑，比如既写 flex 类又写 grid 类，或子元素同时受 Flex 与 Grid 的隐式规则影响。核心原则是：一个容器只用一种布局模型——要么是 Flex（一维），要么是 Grid（二维），不能“脚踩两只船”。
确认并统一父容器的 display 类型
Tailwind 中，flex、grid、block 等工具类本质是设置 CSS 的 display 值。浏览器只会认最后一个生效的声明。常见误用：
- 写成
class="flex grid grid-cols-3"→display: grid覆盖flex，但开发者仍按 Flex 思维写justify-between，结果无效 - 组件库或重置样式里有全局
display: flex，而你又加了grid类，造成覆盖混乱 - 嵌套时误以为“外层 Grid + 内层 Flex”会自动协同，其实只是层级关系，但若内层容器没显式设
flex，它可能仍是block或继承错乱
按场景选对布局模型
别硬套，先想清楚结构本质：
-
一行/一列线性排列（如导航栏、按钮组、标签页）→ 用
flex+justify-/items-类，简洁直接 -
行列明确、需跨格或对齐控制（如仪表盘卡片、表单字段对齐、响应式图册）→ 用
grid+grid-cols-/gap/place-items -
复杂嵌套结构（如大屏首页：顶部横幅 + 左侧菜单 + 右侧数据区）→ 外层用
grid划分宏观区域，各区域内再用flex布局细节内容
检查子元素是否意外脱离布局流
以下写法会让子元素“失效”或错位：
立即学习“前端免费学习笔记（深入）”；
- Grid 容器中给子项加
float→ 浮动元素脱离网格流，位置不可控 - Flex 容器中给子项设
position: absolute且没配top/left→ 占位但不参与弹性计算，易导致空白或挤压 - 子项用了
hidden或invisible但未移除flex/grid相关类 → 仍占据空间或触发对齐逻辑
调试小技巧
遇到错乱，快速定位：
- 在浏览器开发者工具中，点选元素，看右侧面板「Computed」里的
display值，确认最终生效的是flex还是grid - 临时加
outline: 1px solid red（Tailwind 可用outline outline-red-500）查看实际渲染边界 - 删掉所有布局类，从最外层容器开始，一层层加
flex或grid，观察哪一步引入异常
