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 适用的布局类型
该属性主要应用于以下两种布局：
Flexbox：当容器设置为 flex-wrap: wrap; 并产生多行 flex 项目时 Grid：当网格容器有多个轨道行，并且总高度小于容器高度时
单行布局中，align-content 不会生效，此时应使用 align-items 控制项目对齐。
align-content 的常用取值及效果
以下是 align-content 支持的主要值及其表现：
立即学习“前端免费学习笔记（深入）”；
flex-start：所有行堆叠在容器的起始位置 flex-end：所有行堆叠在容器的末尾位置 center：行整体居中对齐，上下留白相等 space-between：行之间均匀分布，首行贴顶部，末行贴底部 space-around：每行周围分配均等空间，上下边缘也有半间距 space-evenly：包括边缘在内的所有间隙完全相等 stretch：默认值，拉伸行以填满剩余空间（注意：flex 项目需允许伸展）
实际应用示例（Flexbox）
假设你有一组卡片，希望在容器中换行排列，并控制行间距：
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 .container { display: flex; flex-wrap: wrap; height: 400px; align-content: space-between;}.item { width: 100px; height: 80px;}
在这个例子中，如果卡片自动换行为三行，这三行会在 400px 高的容器中垂直分布，行间距相等，第一行顶对齐，最后一行底对齐。
Grid 中的 align-content 使用
在 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控制多行布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1045837.html
微信扫一扫 
支付宝扫一扫 
