Flexbox对齐全攻略：justify-content与align-items详解

**Flexbox 对齐指南：`justify-content` 与 `align-items` 组合详解**。想要掌握 CSS Flexbox 布局？`justify-content` 和 `align-items` 是你必须掌握的核心属性！本文将深入解析这两个属性如何分别控制主轴和交叉轴上的对齐方式，助你轻松实现各种居中、对齐和分布效果。`justify-content` 用于控制元素在主轴上的对齐，包括 `flex-start`、`flex-end`、`center`、`space-between`、`space-around` 和 `space-evenly` 等值。`align-items` 则控制元素在交叉轴上的对齐，常用值包括 `stretch`、`flex-start`、`flex-end`、`center` 和 `baseline`。通过灵活组合这两个属性，你可以轻松实现元素的完全居中、顶部左对齐、底部居中等多种实用布局，告别繁琐的手动居中方式，提升开发效率。

答案：justify-content 控制主轴对齐，align-items 控制交叉轴对齐，二者结合可实现居中、两端对齐等布局效果。

在使用 CSS Flexbox 布局时，justify-content 和 align-items 是控制子元素对齐方式的两个核心属性。它们分别作用于主轴（main axis）和交叉轴（cross axis），配合使用可以实现各种居中、对齐和分布效果。

justify-content：控制主轴方向的对齐

该属性定义了 flex 容器中的子元素在主轴上的排列与对齐方式。主轴的方向由 flex-direction 决定（默认为 row，即水平从左到右）。

• flex-start：元素向主轴起点对齐（默认）
• flex-end：元素向主轴终点对齐
• center：元素在主轴居中
• space-between：两端对齐，元素间间距相等
• space-around：每个元素周围有相等空间
• space-evenly：所有元素间及边缘间距完全相等

align-items：控制交叉轴方向的对齐

该属性定义子元素在交叉轴上的对齐方式。交叉轴始终垂直于主轴。例如，主轴是 row（水平），交叉轴就是 vertical（垂直）。

• stretch：拉伸以填满容器（默认，但需子元素无固定尺寸）
• flex-start：元素向交叉轴起点对齐
• flex-end：元素向交叉轴终点对齐
• center：在交叉轴居中
• baseline：按文本基线对齐

典型组合用法示例

通过结合 justify-content 和 align-items，可以轻松实现多种布局需求。

• 完全居中一个元素：
  justify-content: center; align-items: center;
  水平垂直都居中，适合模态框或提示信息。
• 顶部左对齐，类似默认文档流：
  justify-content: flex-start; align-items: flex-start;
• 底部居中按钮组：
  justify-content: center; align-items: flex-end;
  按钮在底部水平居中排列。
• 等间距导航栏（横向）：
  justify-content: space-between; align-items: center;
  首尾项贴边，中间均匀分布，垂直居中。
• 垂直菜单项居中显示（主轴为 column）：
  flex-direction: column; justify-content: center; align-items: center;
  所有菜单项在容器中垂直居中且水平居中。

基本上就这些。只要理解主轴和交叉轴的关系，再搭配这两个属性的不同值，就能灵活控制 flex 布局的对齐方式，无需依赖 margin 或绝对定位来“手动居中”。

今天关于《Flexbox对齐全攻略：justify-content与align-items详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！