Flex布局justify和align怎么用

想要玩转CSS Flex布局，实现元素精准居中和对齐吗？本文将深入解析`justify-content`和`align-items`两大核心属性的配合技巧。`justify-content`控制主轴对齐，决定元素在水平方向上的分布；`align-items`则掌管交叉轴对齐，影响元素在垂直方向上的排列。通过灵活运用这两个属性，例如`center + center`的经典组合，即可轻松实现元素的完全居中。但请务必注意，使用前需确保父容器已设置为`display: flex`，且主轴方向的选择会直接影响对齐效果。掌握这些细节，你也能成为Flex布局大师，快速解决各种居中和对齐难题！

justify-content控制主轴对齐，align-items控制交叉轴对齐，二者配合可实现元素在容器中的精准居中与分布，如center+center实现完全居中，需确保父容器设为display:flex，主轴方向影响对齐表现。

在CSS Flexbox布局中，justify-content 和 align-items 是两个核心的对齐属性，它们分别控制主轴和交叉轴上的内容排列方式。合理配合使用这两个属性，可以轻松实现元素在容器中的精准居中或对齐。

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

该属性定义了flex项目在主轴（main axis）上的分布方式。主轴的方向由 flex-direction 决定，默认是横向从左到右。

• flex-start：项目靠向主轴起点（默认值）
• flex-end：项目靠向主轴终点
• center：项目在主轴上居中
• space-between：项目均匀分布，首尾项贴边，中间间距相等
• space-around：项目周围空间平均分配
• space-evenly：项目间及边缘的间距完全相等

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

该属性定义了flex项目在交叉轴（cross axis）上的对齐方式。如果主轴是横向，交叉轴就是纵向。

• flex-start：项目靠向交叉轴起点
• flex-end：项目靠向交叉轴终点
• center：项目在交叉轴上居中
• baseline：项目按基线对齐
• stretch：项目拉伸以填满容器（默认值）

常见组合用法示例

当需要将一个或多个子元素在父容器中完全居中，最典型的写法是：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

这个组合适用于：

• 登录框在页面中央
• 加载动画居中显示
• 卡片内容垂直水平对齐

如果想让项目顶部对齐但水平居中：

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

注意事项

使用这两个属性前，必须确保父容器设置了 display: flex 或 display: inline-flex，否则属性不会生效。

主轴方向会影响 justify-content 的表现。例如设置 flex-direction: column 后，主轴变为垂直方向，justify-content 就会控制垂直对齐，而 align-items 控制水平对齐。

基本上就这些。掌握这两个属性的配合逻辑，能快速实现大多数居中与对齐需求，是日常布局中最实用的技巧之一。不复杂但容易忽略细节。

终于介绍完啦！小伙伴们，这篇关于《Flex布局justify和align怎么用》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！