flexbox是一维布局，grid是二维布局；前者仅沿主轴分配空间且换行后各行独立，后者通过行列坐标系支持跨行跨列及命名区域定位。
Flexbox 是一维布局，Grid 是二维布局
这不是术语堆砌，而是实际写代码时的分水岭。Flexbox 只能沿 flex-direction 指定的方向（row 或 column）分配空间，换行后各行彼此独立——比如用 flex-wrap: wrap 排出三行卡片，你无法强制第 2 行第 3 个卡片和第 1 行第 3 个卡片对齐列顶边，因为 Flexbox 没有“列坐标”概念。
Grid 则从定义 grid-template-columns 和 grid-template-rows 开始，就建立了行列坐标系。你可以直接写 grid-column: 2 / 4 让一个元素横跨第 2 到第 4 列，或用 grid-area: header 把它塞进命名区域——这种定位能力是 Flexbox 无论如何嵌套、加 margin、设 width 都模拟不出来的。
常见翻车点：
- 用 Flex 实现「左侧固定宽 240px，右侧自适应，页脚粘底」，结果要反复调
min-height、vh、overflow，而 Grid 一行grid-template-rows: auto 1fr auto就稳 - 在 Grid 容器里写
justify-content: center没反应——因为 Grid 默认不响应这个属性，得用justify-items或place-items
什么时候必须用 grid-template-areas 或 grid-column
当你需要描述“这个区块应该落在第几行第几列”“它要跨几行几列”“它和别的区块构成语义区域（如 "header header" "sidebar main" "footer footer"）”，就必须用 Grid。
典型场景：
- 后台仪表盘：左上角搜索栏、中间主图表、右下角数据表格，位置和跨度都固定
- 响应式图片画廊：移动端单列、平板双列、桌面四列，用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))一行搞定，不用写一堆@media - Safari 16.4+ 才支持
grid-template-areas命名区域自动换行；旧版 Safari 必须显式写grid-area: sidebar，否则会错位
什么时候优先用 justify-content + align-items（Flexbox）
如果你只关心「这一行/这一列里的东西怎么排」，比如按钮组水平居中、表单项标签和输入框左对齐、卡片内头像和文字垂直居中——Flexbox 是更轻、更直接的选择。
关键判断信号：
- 子元素数量不确定（比如动态生成的菜单项），但希望它们自动等分或靠边站
- 需要
order属性视觉重排顺序，而不改 HTML 结构 -
height: 100%在 Flex 子项里失效？大概率是父容器没设高度，继承链断了；改成min-height: 0或显式height即可
混用时最容易踩的坑
Grid 划外层结构、Flex 处理内部对齐，是合理分层。但边界模糊时容易出问题：
- 在 Grid 容器里给子项又设
display: flex没问题；但如果子项内部再套一层display: grid，大概率是层级职责没分清 - Flex 子项上写
grid-column，浏览器直接忽略——属性只在 Grid 容器的直系子项生效 - Flex 嵌套超过 3 层（比如
.grid → .row → .col → .card-content），视觉逻辑已超一维范畴，调试困难、重排开销上升，此时该抽离为独立 Grid 区域
真正难的不是语法，而是判断「当前问题到底有没有行列交叉需求」——有，就用 Grid；没有，别硬套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
