使用align-content控制多行整体对齐，align-items控制每行内部对齐，结合flex-wrap: wrap实现换行布局。
当使用 CSS Flex 布局的子元素换行后，可以通过 align-content 和 align-items 来控制多行子元素之间的对齐方式。关键在于父容器设置 flex-wrap: wrap 后，再选择合适的对齐属性。
1. 使用 align-content 控制多行整体对齐
这个属性作用于多行 flex 行之间，决定它们在交叉轴（cross axis）上的分布方式。只有当容器内有多行 flex 项目时才生效。
常见取值包括：flex-start：所有行堆在交叉轴起点flex-end：所有行堆在交叉轴终点center：所有行居中对齐space-between：行之间等距分布，首尾行贴边space-around：每行周围有相等空间space-evenly：所有行间隔完全均匀
示例：
.container { display: flex; flex-wrap: wrap; align-content: center; /* 多行垂直居中 */ height: 300px;}
2. 使用 align-items 控制每行内部对齐
该属性控制每一行中子元素在交叉轴上的对齐方式，适用于所有行。
立即学习“前端免费学习笔记（深入）”；
Qoder
阿里巴巴推出的AI编程工具
270 查看详情 常用值：flex-start：顶部对齐flex-end：底部对齐center：居中对齐stretch：拉伸填满容器（默认）
示例：
.container { display: flex; flex-wrap: wrap; align-items: center; /* 每行子元素垂直居中 */}
3. 单独控制某一行的对齐（使用伪类或分组）
Flexbox 本身不直接支持“按行”设置对齐，但可以通过给子元素分组来实现更灵活布局。
方法：用嵌套容器分组处理
Item 1Item 2Item 3.row {display: flex;justify-content: center; / 每行独立控制 /width: 100%;}
基本上就这些。关键是理解 align-content 管多行分布，align-items 管每行内部对齐。结合使用能应对大多数换行对齐需求。
以上就是css flex子元素换行后如何控制对齐的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1038716.html
微信扫一扫 
支付宝扫一扫 
