grid 适用于二维布局，flexbox 适用于一维布局；混用是分层需要而非折中。一维结构（如导航栏）误用 grid 会导致空白、换行错位或 gap 偏移；二维结构（如仪表盘）硬套 flex 会依赖 hack 且列宽难控。
复杂布局下，Grid 和 Flexbox 不是性能或“高级感”的比拼，而是维度匹配问题：一维就用 flex，二维必须用 grid；混用不是折中，是分层刚需。
一维对齐问题强行套 grid 会出什么错
比如导航栏、表单控件组、按钮组这类天然沿单轴排列的结构，加 display: grid 后常出现意料外空白、换行错位或 Safari 中 gap 偏移。根本原因是 grid 默认生成隐式轨道，而你只关心“一行排开”这个一维意图。
-
justify-content: space-between在 flex 容器里直接生效；在 grid 容器里若没设grid-template-columns，浏览器可能把所有子项塞进第一列，justify-content就完全无效 - 想让某个图标右对齐，flex 用
margin-left: auto或margin-right: 0就行；grid 里硬写grid-column: -1，在旧版 Safari 或某些安卓 WebView 中会静默失效 - 动态增减菜单项时，flex 的
flex-wrap: wrap行为可预测；grid 的grid-auto-flow: dense在子项尺寸不均时容易触发重排抖动
二维结构用 flex 嵌套三层以上就该警觉
当你要同时控制“哪几行”和“哪几列”，比如仪表盘左上标题 + 右上操作按钮 + 中间跨两行数据区 + 底部状态栏，或表单中 label、input、error 提示需共用同一列轨道——这时 flex 已经在用 hack 弥补能力缺口。
- 用 flex 模拟三栏：左侧固定宽 sidebar、中间
flex: 1、右侧自适应内容 → 一旦右侧内容变长，中间栏会被挤压变形，无法保证列宽稳定 - 想让某个卡片横跨两行又占半列？flex 只能靠 wrapper 嵌套 +
position: absolute，但这样会脱离文档流，影响打印样式、无障碍阅读和响应式断点切换 - 移动端折叠侧边栏后，希望主内容自动撑满全宽 → flex 需要 JS 切类名 + 多个
@media控制flex-direction和width；grid 只需改grid-template-columns: 0fr 1fr配合transition
Grid 和 Flex 混用时最常踩的边界错误
二者嵌套合法，但属性不能越界。很多“布局失效”其实是因为在错误层级写了错误属性。
- 在
grid容器里给子项写justify-content或align-items—— 这些是容器级属性，子项上写无效 - 在
flex容器的子项上写grid-column或grid-row—— 浏览器直接忽略，不报错也不渲染 - 在
grid容器内，其直接子项是网格项；若你还给它设display: flex，没问题；但若再在它的子项里又设display: grid，大概率说明区域职责没分清，该抽成独立容器了 -
height: 100%在 flex 子项里常失效，因为父 flex 容器没显式高度；但在 grid 容器里，minmax(0, max-content)对grid-auto-rows更关键——否则图片或长文本会意外撑高整行
真正难的不是选哪个，而是判断当前需求是否真的涉及行列交叉。很多所谓“复杂布局”，其实只是 flex 容器套了太多层，或者 grid 容器没显式定义轨道就依赖隐式线——这些才是实际项目中最常卡住人的点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
