本文详解如何使用 flexbox 的 `flex-wrap: wrap-reverse` 与 `align-content: flex-start` 实现容器内子项按固定尺寸自动换行、自底向上排列并顶部对齐的布局效果。
要精准复现目标效果（即 5 个 80×50px 的红色边框方块，在 240×200px 灰色容器中——每行最多放 3 个（因 3×80 = 240px 刚好填满宽度），共两行，第二行仅含前两个元素，且整体从顶部开始堆叠、视觉上呈现“底部优先、向上填充”的反向换行布局），关键在于理解 Flexbox 中 主轴（main axis）与交叉轴（cross axis） 的行为差异，以及 wrap-reverse 对换行方向和对齐逻辑的双重影响。
首先，必须将容器设为标准 Flex 容器：
.container {
display: flex; /* ✅ 必须是 flex（非 inline-flex），否则 align-content 无效 */
width: 240px;
height: 200px;
border: 1px solid gray;
flex-wrap: wrap-reverse; /* ✅ 核心：反向换行 → 新行插入在旧行上方 */
align-content: flex-start; /* ✅ 配合 wrap-reverse：所有行整体沿交叉轴顶部对齐 */
}⚠️ 注意：flex-direction 保持默认 row（水平主轴），此时：
- 主轴：水平向右 → 子项依次从左到右排列；
- 换行触发条件：当一行总宽 ≥ 容器宽度（240px）时换行；
- wrap-reverse 不改变单行内顺序，而是将新生成的行插入到已有行的上方，并使所有行整体沿交叉轴（此处为垂直方向）顶部对齐；
- 因此：第 1–3 个元素占第一行（底部），第 4–5 个元素自动换至第二行（紧贴其上方），最终视觉表现为“自下而上”填充。
子项样式需补充 box-sizing: border-box，确保 80px 宽度包含边框，避免因 1px 双侧边框导致实际宽度超限（82px）引发意外换行：
立即学习“前端免费学习笔记（深入）”；
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
box-sizing: border-box; /* ✅ 强烈推荐，保障尺寸精确 */
}✅ 正确 HTML 结构（注意修正原始代码中的中文引号为英文引号）：
<div class="container"> <div id="one"> 1</div> <div id="two"> 2</div> <div id="three">3</div> <div id="four"> 4</div> <div id="five"> 5</div> </div>
? 总结要点：
- flex-wrap: wrap-reverse 是实现“反向堆叠行”的唯一可靠方式，flex-direction: column-reverse 会破坏水平排列逻辑；
- align-content 仅在多行（或多列）时生效，单行场景下无作用；
- inline-flex 会使 align-content 失效，务必使用 display: flex；
- box-sizing: border-box 是响应式布局的基石，应作为 CSS 重置的一部分全局启用。
掌握这组属性组合，即可灵活控制多行 Flex 容器的垂直空间分布策略。
