用Flex布局实现H5全屏引导页需外层容器设display: flex、flex-direction: column和min-height: 100vh；内容区用flex: 1自适应撑开；底部分页器与按钮共用一个flex-column容器，居中排列并控制间距；注重小屏触控细节如圆点尺寸、按钮最小高度48px及字号16px起。
用 Flex 布局实现 H5 全屏引导页的底部分页器与按钮分布，核心是让内容区域占满视口、分页器居中稳定、操作按钮清晰可触，三者互不干扰又视觉统一。关键不在“堆样式”，而在结构分层和空间分配逻辑。
外层容器设为垂直弹性流
整个引导页最外层（比如 <div class="onboard"> 或直接作用于 body）必须满足两点：
- display: flex + flex-direction: column —— 确保子元素从上到下排列
- min-height: 100vh —— 防止内容少时高度塌缩，保证始终撑满一屏
这样，即使引导图只有一张、文字只有两行，页面也不会露出底部空白，为底部控件提供稳定定位上下文。
内容区 flex: 1 自动撑开剩余空间
中间的引导图与文案区域（如 <section class="slide">）要声明 flex: 1：
- 它会占据除顶部（如有）和底部之外的所有可用高度
- 避免写
height: calc(100vh - 80px)这类硬编码，适配不同机型更可靠 - 若需垂直居中图文，可在该容器内再套一层
display: flex; align-items: center; justify-content: center;
底部分页器与按钮共用一个 flex 容器
把圆点分页器（.dots）和主操作按钮（如「立即体验」「下一步」）放在同一个底部容器里，例如：
- 容器设为 display: flex + flex-direction: column + align-items: center
- 分页器单独一行：
<div class="dots">● ○ ○</div>，内部用 display: flex + gap: 8px + justify-content: center - 按钮单独一行：
<button class="primary-btn">立即体验</button>，宽度建议width: 80%;或max-width: 320px;，避免小屏过宽 - 两者之间留空用
margin-top: 24px控制，比 padding 更易调试
不推荐把分页器和按钮拆成两个独立 footer —— 容易错位、响应式难对齐，也增加 DOM 复杂度。
小屏与触控细节不能忽略
H5 引导页多用于手机端，以下样式建议直接写进底部容器：
- 给分页器圆点设 width: 8px + height: 8px + border-radius: 50%，高亮项放大为 12px
- 按钮最小高度设为 min-height: 48px，符合移动端触控标准
- 文字字号保持 16px 起，加粗提升可读性
- 必要时用
@media (max-width: 420px)微调间距或圆点尺寸，但尽量少用
基本上就这些。结构清晰、层级分明，Flex 的优势才能真正落地——不是为了用而用，而是让布局逻辑一眼可读、改起来不踩坑。
