css justify-content与align-content在grid中区别

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） 上对齐网格轨道，也就是沿着 行的方向 分配多余空间。它影响的是网格容器在 垂直方向 上的对齐方式。

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

稿定AI社区

在线AI创意灵感社区

60

查看详情

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

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

关键区别总结

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

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

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

以上就是css justify-content与align-content在grid中区别的详细内容，更多请关注php中文网其它相关文章！