一个容器应只用一种布局模型：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，观察哪一步引入异常