使用flex-wrap换行，justify-content水平分布，align-items单行垂直居中，align-content多行整体居中，结合calc()宽度控制实现多行多列布局。
要在CSS中实现Flex布局下的垂直居中与水平分布，并支持多行多列的排列，关键在于合理使用flex-direction、justify-content、align-items和flex-wrap等属性。以下是具体实现方式。
1. 基础容器设置：启用Flex并换行
要让子元素在多行中分布，父容器需设置为display: flex并允许换行：
.container { display: flex; flex-wrap: wrap; /* 允许换行 */ justify-content: space-between; /* 水平方向均匀分布 */ align-items: center; /* 垂直居中对齐 */ height: 100vh; /* 示例高度，确保有空间居中 */ padding: 20px; box-sizing: border-box;}
说明：flex-wrap: wrap让子项在一行放不下时自动折到下一行；align-items: center使每一行的项目在交叉轴（垂直）方向居中。
2. 控制每行项目数量：通过宽度设定
若希望每行显示固定数量的项目（如每行3个），可通过设置子项宽度来控制：
立即学习“前端免费学习笔记（深入）”；
.item { flex: 0 0 calc(33.333% - 10px); /* 每行3项，留出间距 */ margin-bottom: 10px;}
建议：使用calc()计算宽度，减去margin空间，避免换行错位。也可用flex-basis单独设置基础宽度。
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情
3. 多行垂直居中增强：使用align-content
当有多行且希望整体内容在容器中垂直居中时，使用align-content：
.container { align-content: center; /* 多行整体垂直居中 */ min-height: 100vh; /* 配合使用以体现居中效果 */}
注意：align-items控制单行内项目的垂直对齐，而align-content控制多行之间的分布。若只有一行，align-content无效。
4. 完整示例：3列多行，垂直居中，水平分布
.container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; height: 100vh; padding: 20px; box-sizing: border-box;}.item {flex: 0 0 calc(33.333% - 10px);height: 80px;background: #007bff;color: white;display: flex;justify-content: center;align-items: center;margin-bottom: 10px;}
这样即可实现：每行最多3个项目，项目之间水平间距均匀，多行整体垂直居中，单个项目也垂直居中显示。
基本上就这些。关键是理解align-items和align-content的区别，配合flex-wrap和宽度控制，就能灵活实现多行多列的居中与分布效果。
以上就是如何在CSS中实现Flex垂直居中与水平分布_多行多列结合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/955043.html
微信扫一扫 
支付宝扫一扫 
