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

flexbox中align-items控制交叉轴对齐，justify-content控制主轴对齐。1. justify-content常用flex-start、center、flex-end、space-between、space-around调整主轴方向排列；2. align-items常见取值为stretch、flex-start、center、flex-end、baseline用于交叉轴对齐；3. 同时设置两者可实现水平垂直居中等复杂布局效果。

在使用Flexbox布局时，align-items 和 justify-content 是两个非常常用的属性，它们都用于控制容器内子元素的对齐方式，但作用的方向不同。简单来说：

• justify-content 控制的是主轴（main axis）上的对齐方式
• align-items 控制的是交叉轴（cross axis）上的对齐方式

理解主轴和交叉轴是关键。Flex容器默认的主轴是水平方向（从左到右），交叉轴则是垂直方向（从上到下）。当然，通过设置 flex-direction 可以改变主轴方向，进而影响这两个属性的实际表现。

主轴对齐用 justify-content

当你想调整子元素在水平方向的排列方式，比如让它们靠左、居中、靠右，或者分配空间，就该使用 justify-content。

立即学习“前端免费学习笔记（深入）”；

常用取值包括：

• flex-start（默认）：靠主轴起点对齐
• center：主轴方向居中
• flex-end：靠主轴终点对齐
• space-between：两端对齐，中间间距平均分布
• space-around：每个项目周围有相等的空间

举个例子，如果你想做一个水平居中的导航栏，可以这样写：

.nav {
  display: flex;
  justify-content: center;
}

这时候所有的导航项就会在容器中水平居中显示。

交叉轴对齐用 align-items

如果你希望调整子元素在垂直方向的对齐方式，比如让它们上下居中、顶部对齐或底部对齐，那就用 align-items。

常见取值如下：

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

• stretch（默认）：拉伸填满容器
• flex-start：交叉轴起点对齐
• center：交叉轴居中
• flex-end：交叉轴终点对齐
• baseline：按基线对齐（适用于文字）

比如你想让一个按钮内部的图标和文字在垂直方向上居中，可以这样设置：

.button {
  display: flex;
  align-items: center;
}

这样无论图标和文字的高度如何变化，都能保持垂直居中。

有时候需要一起用

很多时候我们会同时设置这两个属性，来达到更精细的对齐效果。比如一个卡片布局，希望内容在水平和垂直方向都居中：

.card {
  display: flex;
  justify-content: center;
  align-items: center;
}

这样就可以实现“完全居中”的效果了。

需要注意的是，如果容器的高度不确定或者子元素本身有高度差异，align-items 的行为可能会略有不同，这时候可以结合 align-self 单独调整某个子元素。

总的来说，记住一句话就能区分清楚：
justify 是主轴，align 是交叉轴。

基本上就这些。只要搞清楚主轴方向，这两个属性的使用就不会混淆了。

以上就是CSS中align-items和justify-content在flex布局中的区别的详细内容，更多请关注php中文网其它相关文章！