CSSGrid：justify-content与align-content区别详解

本篇文章向大家介绍《CSS Grid 中 justify-content 与 align-content 的区别如下：justify-content：控制 网格容器内所有网格项 在 主轴（行方向） 上的对齐方式。 常见值包括：start（默认）、end、center、space-between、space-around、space-evenly。align-content：控制 网格容器内所有网格项 在 交叉轴（列方向） 上的对齐方式。 常见值包括：start（默认）、end、center、stretch、space-between、space-around。示例：.grid-container { display: grid; justify-content: center; /* 主轴居中 */ align-content: center; /* 交叉轴居中 */ }总结：属性对齐方向控制对象justify-content主轴（行方向）所有网格项align-content交叉轴（列方向）所有网格项两者常用于调整网格布局的整体对齐方式，但作用方向不同。》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

justify-content控制水平方向网格轨道对齐，align-content控制垂直方向网格轨道对齐，两者均在容器有剩余空间时生效。

在 CSS Grid 布局中，justify-content 和 align-content 都用于控制网格容器内网格轨道（grid tracks）的对齐方式，但它们作用的方向不同，适用的前提也有区别。

justify-content：控制列轴方向上的对齐（水平方向）

justify-content 用于在 行轴（inline axis） 上对齐整个网格轨道，也就是沿着 列的方向 分配多余空间。它影响的是网格容器在 水平方向 上如何对齐其内容。

• start - 左对齐（默认）
• end - 右对齐
• center - 居中对齐
• space-between - 两端对齐，中间间距相等
• space-around - 每个项目周围有相等空间
• space-evenly - 所有项目之间的间距完全相等

这个属性起作用的前提是：网格容器在行轴方向上有 多余空间，即所有列轨道的总宽度小于容器宽度。

align-content：控制行轴方向上的对齐（垂直方向）

align-content 用于在 块轴（block axis） 上对齐网格轨道，也就是沿着 行的方向 分配多余空间。它影响的是网格容器在 垂直方向 上的对齐方式。

• start, end, center
• space-between, space-around, space-evenly

这个属性生效的前提是：网格容器在块轴方向存在 多余高度，即所有行轨道的总高度小于容器高度。

关键区别总结

• justify-content 控制列之间的水平分布（横轴）
• align-content 控制行之间的垂直分布（纵轴）
• 两者都只在网格容器有剩余空间时才起作用
• 它们作用于整个网格轨道的排列，而不是单个网格项的对齐

注意：如果网格容器的行或列使用 fr 单位填满可用空间，通常不会有剩余空间，此时 align-content 或 justify-content 就不会产生效果。

基本上就这些。理解这两个属性的关键是分清“行”和“列”对应的方向，以及“网格轨道整体”与“单个网格项”的区别。

到这里，我们也就讲完了《CSSGrid：justify-content与align-content区别详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！