为何justify-content在嵌套Flexbox中仅能对齐单行文本的Flex项？

嘿，作为Flexbox初学者，你遇到的这个问题其实是很常见的混淆点——我们来一步步拆解清楚：

为什么单行文本生效，多行不生效？ #

你当前的代码里，每个.flex-item都是嵌套的Flex容器，设置了justify-content: center和align-items: center，但两者的作用对象和场景有区别：

• 对于单行文本：文本会被当作一个「匿名Flex项」，它的宽度等于自身内容的宽度，所以justify-content: center会把这个“窄”的匿名项在.flex-item的水平主轴上居中，视觉上就呈现为文本居中。
• 对于多行文本：当文本换行后，这个匿名Flex项的宽度会自动撑满.flex-item的可用宽度（因为你给.flex-item设置了flex: 0 1 30%，有固定宽度限制）。这时候justify-content: center对一个已经占满容器宽度的子元素来说，完全没有视觉效果，而文本本身默认是左对齐的，所以看起来就像没生效一样。

解决方案：补充文本对齐属性 #

你需要区分「Flex容器的子元素对齐」和「文本内容本身的对齐」：

• justify-content控制的是Flex容器内子元素的主轴分布
• text-align控制的是元素内部文本内容的水平对齐

给.flex-item添加text-align: center，就能让单行/多行文本都在元素内水平居中，结合已有的align-items: center实现垂直居中：

.flex-item {
  flex: 0 1 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* 新增这一行 */
}

修改后，所有Flex项里的文本都会同时实现垂直居中（靠align-items: center）和水平居中（靠text-align: center），完全符合你的需求。

内容的提问来源于stack exchange，提问作者OneDay