企业级后台骨架屏的Flex布局核心是三层刚性嵌套加两处关键收缩控制（min-height: 0和flex: 1 1 0），外层设display: flex; flex-direction: column; height: 100vh;，.app-body设flex-direction: row;，内容区需嵌套flex-column并加min-height: 0和flex: 1; overflow: auto;。

直接给结论：企业级后台骨架屏的 Flex 布局，核心不是“用多少层 flex”，而是三层刚性嵌套 + 两处关键收缩控制（min-height: 0 和 flex: 1 1 0），漏一个就导致内容区滚动失效、侧边栏撑出屏幕、IE11 高度塌陷。

外层容器必须设 display: flex; flex-direction: column;

这是整个骨架不崩的起点。顶部导航和主体区域天然纵向堆叠，但很多人错把 display: flex 加在 body 上——Safari 和 Chrome 新版本会错误解析 height: 100vh，导致主体区域高度不足，底部被截断。

• .app（根容器）设 display: flex; flex-direction: column; height: 100vh;，不碰 body
• .app-header 高度固定（如 60px），.app-body 自动占满剩余空间
• 避免用 position: absolute 覆盖子元素——它脱离 flex 流，后续加滚动或响应式时极易错位

.app-body 必须设 flex-direction: row; 分左右栏

这是双栏能否自适应的关键。只给侧边栏写 width: 240px 不够，Flex 容器必须明确感知“横向分栏”意图，否则右侧内容区不会自动填满剩余空间。

• .app-body 设 display: flex; flex-direction: row;
• 侧边栏用 flex: 0 0 240px;（不放大、不缩小、基准宽 240px），别只写 width
• 内容区用 flex: 1;（等价于 flex: 1 1 0%），IE11 必须补全为 flex: 1 1 0;
• 内容区必须加 min-height: 0;，否则内部 overflow: auto 会失效

内容区内部再嵌套 flex-direction: column; 并控制滚动

面包屑 + 表格/卡片列表这类上下结构，若不嵌套 flex-column，表格超长时无法滚动，或者面包屑被挤出视口顶部。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• .app-main（内容区）自身设 display: flex; flex-direction: column;
• .app-breadcrumb 和 .app-content 是它的直接子项，自然纵向排列
• .app-content 加 flex: 1; overflow: auto; min-height: 0;
• 如果里面放 ，它的直接父容器还得加 height: 100%;，否则 overflow 不触发

  移动端适配别用 display: none，改用 order 和 flex-direction: column;

  单纯在媒体查询里给侧边栏加 display: none，会导致内容区突然变宽但内部子项未重排，卡片间距错乱、按钮换行异常。

  • 保持 DOM 结构不变，只改 .app-body 的 flex-direction: column;
  • 侧边栏加 order: -1;，让它在小屏排到顶部
  • 内容区加 order: 1;，自然下沉
  • IE11 不支持 order，需降级为 flex-direction: column-reverse; + margin-top 模拟

  最易被忽略的是 min-height: 0 ——它不是可选项，而是 flex 子项能否收缩、滚动能否生效的开关；IE11 下 flex: 1 必须展开写，否则主区域高度可能为 0。这些点不写死，骨架屏在真实业务中跑几天就会出问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！