CSS布局中align-items与justify-content区别_Flex对齐详解

新闻中心 NEWS CENTER

2025-10-30

浏览次数：次

justify-content控制主轴对齐，align-items控制交叉轴对齐；例如flex-direction:row时，justify-content管水平方向，align-items管垂直方向，二者结合可实现元素居中布局。

css布局中align-items与justify-content区别_flex对齐详解

在CSS Flex布局中，align-items 和 justify-content 是两个常用的对齐属性，它们控制容器内子元素的排列方式，但作用的方向不同。理解它们的区别，是掌握Flex布局的关键。

Flex布局基于两个轴：主轴（main axis）和交叉轴（cross axis）。子元素沿着主轴排列，而对齐则分别在这两个轴上进行。

justify-content 调整子元素在主轴方向上的分布方式，适用于有剩余空间的情况。

例如：flex-direction: row 时，justify-content 控制左右分布；若设为 column，则控制上下分布。

align-items 定义子元素在交叉轴上的对齐方式，类似于 justify-content，但方向不同。

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

比如容器高度大于子元素时，使用 center 可让所有项目垂直居中。

假设有一个横向排列的Flex容器：

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

效果是：子元素在水平方向居中（主轴），同时在垂直方向也居中（交叉轴），实现真正的居中对齐。

基本上就这些。记住：justify-content 管“主方向”，align-items 管“垂直方向”，结合 flex-direction 就能准确判断它们的作用。不复杂但容易忽略方向依赖。

以上就是CSS布局中align-items与justify-content区别_Flex对齐详解的详细内容，更多请关注其它相关文章！