一维布局用 flex，二维布局用 grid；混用时 grid 作外层区域划分，flex 处理内部对齐，避免属性越界和过度嵌套。
一维对齐问题硬套 grid 会出什么错
导航栏、按钮组、表单控件这类天然沿单轴排列的结构，加 display: grid 后常出现意料外空白、换行错位，或 Safari 中 gap 偏移。根本原因是 grid 默认生成隐式轨道，而你只关心“一行排开”这个一维意图。
-
justify-content: space-between在 flex 容器里直接生效；在 grid 容器里若没设grid-template-columns，浏览器可能把所有子项塞进第一列，justify-content就完全无效 - 想让某个图标右对齐，flex 用
margin-left: auto就行；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，没问题；但若再在它的子项里（即 grid 项的子元素）写grid-column，同样无效
真实项目里最合理的分层方式
Grid 常作为外层容器划分区域，每个区域内再用 flex 处理细节对齐。比如仪表盘用 grid 划出「筛选区」「图表区」「数据卡区」，而每张数据卡内部用 flex 居中图标+文字+数值。
- 反模式：在 grid 容器里给子项又设
display: grid—— 除非真需要二级网格控制，否则大概率是层级职责没分清 - 性能提示：Flex 嵌套超过 3 层时重排开销明显上升；Grid 的
minmax()和auto-fit虽强大，但复杂calc()表达式在滚动中可能触发频繁重算 - IE11 兜底仍是现实：如果项目需支持 IE11，
grid-template-areas、gap、auto-fit都得降级，但 flex 的核心能力（flex-grow、justify-content）仍可用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
