移动端页头不铺满：三个检查点

卡片类项目里，页头、导航与页脚在桌面端正常，到窄屏只占中间一段宽度。成因集中在三处，按检查成本从低到高排列。

检查点一：交叉轴对齐

.page {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* 缺省值即 stretch */
}

纵向 flex 容器的交叉轴是水平方向，缺省的 stretch 会让子项铺满宽度；一旦被写成 center 或 flex-start，子项就收缩到内容宽度。出现只占中间一段的现象时先看这一条。

检查点二：残留的定位与宽度声明

header, nav, footer {
  width: 100%;
  max-width: none;
  position: static;
}

调试阶段留下的 position: absolute 会让元素脱离正常流，宽度改由内容或定位偏移决定；max-width 的遗留取值也会在窄屏上提前封顶。两者一起清掉，宽度回到 100%。

检查点三：盒模型与溢出

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }

默认 content-box 下，padding 与 border 会额外增加宽度，配合 100% 宽度直接溢出并产生横向滚动条。全局设 border-box，并清掉 body 的默认外边距。

排查顺序

1. 确认父容器的 align-items 取值；
2. 确认元素自身有没有残留定位或 max-width；
3. 确认 box-sizing 与 body 外边距；
4. 确认视口 meta 标签存在且未锁定缩放。