CSS中align-items和justify-content在flex布局中的区别

在Flex布局中，align-items控制交叉轴对齐，justify-content控制主轴对齐，二者作用方向不同，需结合主轴与交叉轴的概念理解其差异。具体区别如下：

• justify-content：控制子元素在主轴（main axis）上的对齐方式。

  主轴方向默认水平（从左到右），但可通过flex-direction修改（如改为垂直方向column）。

  常用场景：调整子元素在水平或垂直方向（当主轴改变时）的排列方式。

• align-items：控制子元素在交叉轴（cross axis）上的对齐方式。

  交叉轴方向默认垂直（从上到下），当主轴方向改变时，交叉轴方向也会随之调整（如主轴为垂直时，交叉轴变为水平）。

  常用场景：调整子元素在垂直或水平方向（当主轴改变时）的对齐方式。

示例：

• 默认主轴水平时：

  justify-content控制水平对齐，align-items控制垂直对齐。

• 主轴改为垂直（flex-direction: column）时：

  justify-content控制垂直对齐，align-items控制水平对齐。

• flex-start：子元素向主轴起点对齐（默认值）。
• center：子元素在主轴方向居中。
• flex-end：子元素向主轴终点对齐。
• space-between：子元素两端对齐，中间间距平均分布。
• space-around：每个子元素周围分配相等的空间。

应用场景：

• 水平居中导航栏：.nav { display: flex; justify-content: center; /* 导航项水平居中 */}

• stretch：子元素拉伸填满容器（默认值，需子元素未设置固定高度/宽度）。
• flex-start：子元素向交叉轴起点对齐。
• center：子元素在交叉轴方向居中。
• flex-end：子元素向交叉轴终点对齐。
• baseline：子元素按基线对齐（适用于文字内容）。

应用场景：

• 垂直居中按钮内图标与文字：.button { display: flex; align-items: center; /* 图标与文字垂直居中 */}

同时设置justify-content和align-items可实现子元素在水平和垂直方向的双重对齐，例如：

• 完全居中：.card { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */}
• 其他组合：

  水平分散排列 + 垂直底部对齐：.container { justify-content: space-between; align-items: flex-end;}

• 主轴方向的影响：若通过flex-direction修改主轴方向（如column），justify-content和align-items的作用方向会互换。例如：.container { flex-direction: column; /* 主轴变为垂直 */ justify-content: center; /* 此时控制垂直居中 */ align-items: center; /* 此时控制水平居中 */}
• 子元素高度差异：当子元素高度不一致时，align-items: stretch会导致所有子元素拉伸至容器高度；若需单独调整某个子元素，可使用align-self覆盖默认值。

• 核心区别：

  justify-content → 主轴对齐（水平或垂直，取决于flex-direction）。

  align-items → 交叉轴对齐（垂直或水平，取决于flex-direction）。

• 记忆口诀：“justify主轴，align交叉轴”，结合主轴方向即可快速区分二者用途。