Flex布局对齐需分清主轴与侧轴：justify-content控制主轴对齐，align-items控制单行侧轴对齐，align-content控制多行侧轴分布，align-self可单独调整子项侧轴对齐。

Flex 布局在 H5 中控制对齐，核心是分清主轴和侧轴，并用对应属性作用于父容器（或个别子项）。主轴方向默认是水平（flex-direction: row），侧轴就是垂直方向；一旦改了主轴方向，对齐属性的作用方向也会跟着变。

主轴对齐：用 justify-content

这个属性写在父容器上，控制所有子项在主轴上的排列位置：

• flex-start：默认值，靠主轴起点对齐（如 row 时左对齐）
• flex-end：靠主轴终点对齐（如 row 时右对齐）
• center：主轴居中
• space-between：两端对齐，项目之间等距，首尾贴边
• space-around：每个项目两侧留等距空隙，所以项目间空隙是边距的两倍
• space-evenly：所有间隙（包括首尾）完全相等

侧轴单行对齐：用 align-items

同样写在父容器上，控制**一行内**所有子项在侧轴上的对齐方式：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• flex-start：侧轴起点对齐（如 row 时顶部对齐）
• flex-end：侧轴终点对齐（如 row 时底部对齐）
• center：侧轴居中（常配合 justify-content: center 实现水平垂直居中）
• baseline：按第一行文字基线对齐，适合含文本的混合布局
• stretch：默认值，子项在侧轴方向拉伸填满容器高度（前提是没设固定高度）

侧轴多行对齐：用 align-content

当子项换行（flex-wrap: wrap）形成多行时，该属性才生效，控制**行与行之间**在侧轴上的分布：

• flex-start：所有行靠侧轴起点堆叠（如 row 时顶部紧贴）
• flex-end：靠侧轴终点堆叠（如 row 时底部紧贴）
• center：多行整体在侧轴居中
• space-between：首尾行贴边，中间行等距分布
• space-around：每行上下留等距空隙，行间空隙是边距的两倍
• space-evenly：所有行间距（含上下边）完全一致

个别子项微调：用 align-self

这是写在子元素上的属性，可覆盖父容器的 align-items 设置，只影响当前子项在侧轴上的对齐：

• 取值和 align-items 一样：flex-start、center、flex-end、stretch、baseline
• 比如三列布局中，想让中间一项垂直居中，其他保持顶部对齐，就给中间加 align-self: center