Flexbox 是一维布局模型，仅支持主轴和交叉轴线性排列，缺乏行列坐标系与原生跨行跨列能力，面对复杂二维布局时需嵌套、计算和JS干预，导致结构脆弱、维护困难。
Flexbox 本质是一维布局模型
它只在主轴（flex-direction）和交叉轴（垂直方向）上做线性排列与对齐，没有行列坐标系。当你需要同时指定“第2行第3列”或“横跨两行又占半列”，Flexbox 没有 grid-row、grid-column 这类原生定位能力，只能靠嵌套容器 + flex: 1 + margin + calc() 拼凑，逻辑断裂、调试困难。
嵌套三层以上 Flex 容器就暴露结构性缺陷
常见翻车场景：
- 父容器设
display: flex→ 子容器再设display: flex→ 子子项还要居中/等高 → 第三层开始，align-items和height: 100%失效概率陡增 - 某卡片需跨两行：必须额外包一层
div，设display: flex; flex-direction: column，再对内部项设flex: 1—— DOM 层级膨胀，语义丢失 - 移动端折叠侧边栏后主内容撑满：Flex 需 JS 切类名 + 多个
@media控制flex-direction和flex-basis；Grid 只需改一行grid-template-columns: 0fr 1fr
order 属性无法跨容器重排元素
如果 HTML 是：
<div class="wrapper">
<div class="column">
<div id="item-1"></div>
<div id="item-2"></div>
</div>
<div id="item-3"></div>
<div id="item-4"></div>
</div>
那么 order 只能调整 .column、#item-3、#item-4 的顺序，#item-1 和 #item-2 被“锁死”在 .column 内部，无法与外部元素自由混排。Grid 不受 DOM 嵌套限制，grid-area 或 grid-row/grid-column 可直接跨层级定位。
立即学习“前端免费学习笔记（深入）”；
gap 和高度不均导致错行问题频发
Flexbox 的 flex-wrap 换行依赖子项实际高度计算交叉轴尺寸，一旦某张卡片内容多、高度突增，第二行首项极易被挤到第三行——尤其小屏下视觉错乱明显。Grid 的列宽由 grid-template-columns 或 minmax() 显式定义，与子项高度无关，不会因单个元素变高而破坏整行对齐。
