align-content用于控制多行Flexbox或Grid布局在交叉轴上的对齐方式，仅在存在多余空间且有多行时生效。其常用值包括flex-start、flex-end、center、space-between、space-around、space-evenly和stretch，分别实现不同对齐效果。在Flexbox中需配合flex-wrap使用，在Grid中则应用于多行轨道且容器高度大于内容高度时，能有效提升多行布局的美观性与规整度。
在使用 CSS Flexbox 或 Grid 布局时，align-content 是一个关键属性，用于控制多行内容在交叉轴（cross axis）上的对齐方式。它只在容器内有多行可伸缩项目（flex lines）或网格行（grid rows）且存在额外空间时才起作用。
该属性主要应用于以下两种布局：
单行布局中，align-content 不会生效，此时应使用 align-items 控制项目对齐。
以下是 align-content 支持的主要值及其表现：
立即学习“前端免费学习笔记（深入）”；
假设你有一组卡片，希望在容器中换行排列，并控制行间距：
.container { display: flex; flex-wrap: wrap; height: 400px; align-content: space-between; } .item { width: 100px; height: 80px; }在这个例子中，如果卡片自动换行为三行，这三行会在 400px 高的容器中垂直分布，行间距相等，第一行顶对齐，最后一行底对齐。
在 Grid 布局中，当网格总行高小于容器高度时，可以这样设置：
.grid-container { display: grid; grid-template-rows: repeat(2, 100px); grid-template-columns: repeat(3, 1fr); height: 300px; align-content: center; }这里定义了两行各 100px，总高 200px，在 300px 容器中，整个网格内容块会垂直居中显示。
基本上就这些。只要记住：align-content 管的是“行怎么排”，而且必须有多行才有意义。用好它能让多行布局更整洁、更有设计感。
以上就是如何通过css align-content控制多行布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
916
收藏
