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） 上对齐网格轨道，也就是沿着 行的方向 分配多余空间。它影响的是网格容器在 垂直方向 上的对齐方式。
立即学习“前端免费学习笔记（深入）”；
Revid AI
AI短视频生成平台
96 查看详情 常见取值与 justify-content 类似：start, end, centerspace-between, space-around, space-evenly
这个属性生效的前提是：网格容器在块轴方向存在 多余高度，即所有行轨道的总高度小于容器高度。
关键区别总结
justify-content 控制列之间的水平分布（横轴）align-content 控制行之间的垂直分布（纵轴）两者都只在网格容器有剩余空间时才起作用它们作用于整个网格轨道的排列，而不是单个网格项的对齐
注意：如果网格容器的行或列使用 fr 单位填满可用空间，通常不会有剩余空间，此时 align-content 或 justify-content 就不会产生效果。
基本上就这些。理解这两个属性的关键是分清“行”和“列”对应的方向，以及“网格轨道整体”与“单个网格项”的区别。
以上就是css justify-content与align-content在grid中区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1036260.html
微信扫一扫 
支付宝扫一扫 
