如何在现代CSS中利用Flex布局快速实现居中加载动画骨架屏-css教程-PHP中文网

企业级后台骨架屏的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;。

如何在现代css中利用flex布局快速实现居中加载动画骨架屏

用 `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 内部布局：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.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 合并问题。