flex布局不适合构建大型复杂全页面框架，根本原因在于它是一维模型，无法原生支持行列协同定位，面对整页二维结构需多层嵌套、手动计算及js干预，导致结构脆弱、维护困难。
Flex 布局不适合构建大型复杂全页面框架，根本原因在于它是一维模型，而整页结构天然需要二维协调——你没法靠“一行排完 header、sidebar、main、footer”来可靠控制行列关系，硬用只会让 CSS 变成状态机，越改越脆。
Flex 无法原生支持行列协同定位
整页骨架必须同时约束水平（列宽）和垂直（行高）空间，比如 sidebar 固定 240px、main 自适应、footer 粘底。Flex 只能靠 flex-direction: column 或 row 单向伸缩，一旦要同时处理“左侧固定 + 中间填满 + 底部吸附”，就得嵌套多层容器 + 手动算 flex-basis 和 flex-grow，稍一改动就连锁失效。
-
min-height: 100vh在嵌套 Flex 容器中常被截断，尤其 Safari iOS 11–12 对flex: 1解析有偏差 -
align-items: stretch在父级没设明确height时行为不可控，子项高度可能塌缩或溢出 - 想让 footer 始终在视口底部？得靠
display: flex; flex-direction: column包住 body，再给main设flex: 1——但这个flex: 1在三层嵌套后大概率不生效
响应式切换时逻辑爆炸
PC 端三栏（sidebar + main + aside），移动端变成单列，Flex 要靠 @media 切 flex-direction、重置 flex-basis、补 flex-wrap、甚至加 order 调序。每加一个断点，就得同步检查所有嵌套层级的 flex 行为是否还一致。
- 侧边栏折叠动画？Flex 得靠
width+max-width+overflow组合，宽度归零时内容会重排抖动 - Grid 只需改一行
grid-template-columns: 0fr 1fr+transition，轨道保留，无重排 - 用
order想把 footer 提到 main 上方？前提是它们必须是同一 Flex 容器的直系子元素——HTML 结构稍一嵌套（比如<div class="content"><main></main></div>），order就完全失效
嵌套越深，调试越失控
真实项目里，header 里有导航 Flex，main 是 Grid，card 内部又用 Flex 排图标+文字——这种混用本身没问题，但问题出在：当某个卡片高度突增，导致 flex-wrap 换行错位时，你得一层层确认是不是 align-content 写错位置、gap 被父级 margin 抵消、还是 flex-shrink 在某层被隐式禁用。
- Flex 的
justify-content和align-items只作用于直接子项，跨层级无效；Grid 的grid-area可直接定位任意子项，无视 DOM 层级 - 浮动或绝对定位混入 Flex 容器时，
float会被忽略，position: absolute子项脱离 Flex 计算，但浏览器不报错，只默默失效 - Chrome DevTools 的 Flex 调试面板只显示当前容器的主轴/交叉轴尺寸，不会告诉你上层容器的
flex-basis是否被继承覆盖
真正卡住人的不是写不出 Flex 全页布局，而是改不动——加个新模块得通读三页 CSS，调个断点要反复验证五层嵌套的伸缩逻辑。二维问题用一维工具硬解，最后总在某个深夜为 height: 100% 不继承、flex: 1 不拉伸、或 order 突然不生效抓头发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
