Flex多行居中怎么设置

大家好，我们又见面了啊~本文《Flex布局多行居中怎么实现》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

要实现Flex布局中多行项目的整体垂直居中，需设置flex-wrap: wrap启用换行，再用align-content: center控制多行在交叉轴上的整体居中；align-items仅影响单行内子项对齐，二者作用对象不同。

要实现 Flex 布局中多行项目的**整体垂直居中**（即所有行在容器内上下居中），关键不是用 align-items，而是启用换行后通过 align-content 控制行与行之间的分布。

1. 必须设置 flex-wrap: wrap

默认情况下 Flex 是单行的（flex-wrap: nowrap），此时 align-content 无效。只有开启换行，让容器内出现「多行」，align-content 才起作用。

• 加上 flex-wrap: wrap 或 flex-wrap: wrap-reverse
• 确保子项总宽度超过容器宽度（或高度，取决于主轴方向），才会实际折行

2. 使用 align-content: center 实现多行整体居中

align-content 用于控制**多行在交叉轴上的对齐方式**。当容器有剩余空间时，它决定各行如何分配这部分空间。

• align-content: center —— 所有行作为一个整体，在交叉轴上居中
• 其他常用值：flex-start（顶部对齐）、flex-end（底部对齐）、space-between（首尾撑开）等

3. 注意 align-items 和 align-content 的区别

别混淆这两个属性：

• align-items：控制**每一行内单个子项**在交叉轴上的对齐（如单行里文字垂直居中）
• align-content：控制**多行作为一个整体**在交叉轴上的位置（如三行内容整体上下居中）

两者可以共存。例如：align-items: flex-start 让每行内项目顶对齐，同时 align-content: center 让这三行整体居中。

4. 完整示例（水平主轴，多行垂直居中）

HTML 结构简单：

CSS 如下：

效果：子项按行排列，每行尽可能放满（每项宽 120px，容器宽约 300px → 每行最多 2 个），共两行；这两行整体在 300px 高的容器中垂直居中。

今天关于《Flex多行居中怎么设置》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！