企业级后台骨架屏的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;。
用 display: flex 居中骨架屏容器，别碰 position: absolute
骨架屏本身是静态占位结构，它的容器必须能随内容流自然排布，同时自身要稳定居中。用 position: absolute + transform: translate(-50%, -50%) 看似能居中，但会让骨架屏脱离文档流，导致：真实内容加载后位置跳变、滚动锚点错乱、响应式断点失效。
正确做法是让骨架屏的父容器（比如 .skeleton-wrapper）设为 Flex 容器：
.skeleton-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
-
min-height: 100vh是关键，确保即使内容很短，骨架屏也能垂直撑满视口 - 如果骨架屏要嵌在某个卡片内部（比如列表项），就把卡片设为
display: flex，而不是整个页面 - 避免对骨架屏子元素再设
margin: auto—— Flex 已经接管了对齐逻辑，重复干预反而容易冲突
justify-content 和 align-items 的取值差异直接影响骨架屏行为
这两个属性控制主轴和交叉轴对齐，但在骨架屏场景下容易被误用：
- 水平居中用
justify-content: center，不是space-around或space-evenly—— 后两者会把多个骨架项“摊开”，破坏单个占位结构的紧凑感 - 垂直居中必须配
align-items: center，仅靠justify-content不起作用（它只管主轴，Flex 默认主轴是水平方向） - 如果骨架屏是竖向堆叠的（如新闻流），可临时切换主轴：
flex-direction: column，此时justify-content控制垂直间距，align-items控制水平对齐
骨架屏内部结构用 Flex 布局比浮动/inline-block 更可靠
骨架屏的典型结构是图片占位 + 标题占位 + 段落占位，三者需保持固定相对位置。传统方案用 float 或 display: inline-block，但会遇到：
立即学习“前端免费学习笔记（深入）”；
- 高度塌陷：父容器无法自动包裹子占位块
- 基线对齐错位：灰色矩形和文字行高不一致时上下偏移
- 换行不可控：小屏幕下标题和段落可能意外折行
改用 Flex 内部布局：
.skeleton-card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.skeleton-image { height: 200px; background-color: var(--loading-grey); border-radius: 4px; }
.skeleton-title { height: 1.6rem; background-color: var(--loading-grey); border-radius: 4px; }
.skeleton-desc { height: 1rem; background-color: var(--loading-grey); border-radius: 4px; }
注意：gap 比 margin 更安全 —— 它不会影响第一个或最后一个子元素的外边距计算，也避免了 margin 合并问题。
隐藏骨架屏时，用 opacity + visibility 比 display: none 更平滑
真实内容加载完成，需要把骨架屏“收走”。直接用 display: none 会导致重排（reflow），页面内容突然上移，有明显抖动。
- 推荐组合：
opacity: 0+visibility: hidden+transition: opacity 0.3s ease-out - 这样骨架屏淡出，真实内容淡入，视觉连贯；且
visibility: hidden保留了占位空间，避免布局跳动 - 不要给
opacity加太长的过渡（如 >0.5s），否则用户会觉得“卡住”，0.2–0.3s 是感知最自然的区间
真正容易被忽略的是：骨架屏的 CSS 变量（如 --loading-grey）必须定义在 :root 或全局作用域，否则在组件级 Scoped CSS（如 Vue SFC）里可能失效；而 transition 必须写在骨架屏元素本身，不能只写在隐藏类上 —— 否则首次渲染时没有过渡效果。
