启用flex-wrap: wrap实现多行布局，结合align-content控制行间对齐方式，需设置容器高度，注意单行时使用align-items调整对齐。
在使用 Flex 布局时，当容器内的项目超出一行，我们可以通过 flex-wrap 和 align-content 配合实现多行排列，并控制行与行之间的对齐方式。这是构建响应式布局的关键技巧之一。
启用多行布局：flex-wrap
默认情况下，Flex 容器中的项目会尝试在一行内显示。要让项目在空间不足时换行，需要设置 flex-wrap: wrap。
常见取值：nowrap：不换行（默认）wrap：允许换行，下一行在下方wrap-reverse：换行，但行的顺序反向（从下往上）
示例：
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情
.container { display: flex; flex-wrap: wrap;}
控制多行对齐：align-content
只有当容器中存在**多行** Flex 项目时，align-content 才会生效。它控制的是行与行之间的对齐和分布方式。
立即学习“前端免费学习笔记（深入）”；
常用取值：stretch：各行拉伸以填满容器（默认）flex-start：所有行靠顶部对齐flex-end：所有行靠底部对齐center：所有行居中对齐space-between：行之间等距，首尾行贴边space-around：每行周围有相等间距space-evenly：所有行包括边缘间距完全均匀
示例：
.container { display: flex; flex-wrap: wrap; align-content: space-between; height: 300px; /* 必须设置高度才能看到 align-content 效果 */}
实际应用示例
假设我们要做一个卡片网格，每行最多放 3 张卡，卡片自动换行并均匀分布。
.grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; height: 400px;}.card {flex: 0 0 calc(33.333% - 16px); / 每行最多3个，减去间隙 /background: #eee;padding: 20px;text-align: center;}
这样，卡片会在一行放不下时自动换行，且整体从顶部开始排列。
注意事项
align-content 不作用于单行情况。如果只有一行项目，即使设置了 align-content: center，也不会垂直居中。此时应使用 align-items 控制单行项目的交叉轴对齐。
确保 Flex 容器有明确的高度，否则 align-content 的多数效果无法体现。
基本上就这些。灵活运用 flex-wrap 和 align-content，可以轻松实现多行弹性布局。
以上就是如何使用CSS实现Flex多行布局_flex-wrap与align-content结合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/949111.html
微信扫一扫 
支付宝扫一扫 
