Flexbox容器内<strong>文本为何呈现列状排列？

嘿，我来帮你搞定这个Chrome里的Flexbox布局问题！

问题根源 #

你遇到的列状排列问题，核心原因是：当你给#item_desc设置display: flex后，容器内的<strong>标签和后面的普通文本节点被当成了两个独立的Flex项目。默认的flex-direction: row会让它们尝试并排显示，但结合align-items: center属性，这些Flex项目的宽度会被收缩到内容的最小尺寸。再加上你的容器嵌套在flex-direction: column的父容器中，间接限制了横向空间，最终导致每个项目的宽度被压得极窄，文本只能逐行换行，看起来就像竖排的列状了。

解决方案 #

最直观且有效的修复方法是把所有文本内容包裹在一个单一的块级元素内，比如<p>标签。这样整个文本会变成一个独立的Flex项目，Flex的居中属性会正确作用于这个整体，文本也会正常换行排版：

修改后的HTML代码：

<div id="item_desc" >
  <p><strong>Text in strong</strong> nulla a laoreet nibh, at placerat leo. Proin uis condimentum ligula, ut viverra turpis. Morbu lamcorper consequat gravida. Aenean vestibulum urna id purus vulputate landit. Vivamus eleifend, erat quis dapibus pulvinar, eros justo commodo urpis, molestie commodo orci nisi maximus diam. Pellentesque posuere pulvinar malesuada. Nulla eu vestibulum erat. Duis sit amet turpis id tellus eleifend faucibus nec non tellus.</p>
</div>

保持原CSS不变：

#item_desc { 
  border:1px solid red; 
  padding: 15px 20px 15px 0px; 
  min-height: 156px; 
  width:100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align:center; 
}

额外说明 #

如果你不想额外嵌套元素，也可以通过调整#item_desc的Flex属性来避免子项收缩：比如添加flex-direction: column让内部子项垂直排列（这样文本会自然居中换行），或者给内部子项设置flex: 1 0 100%强制占满宽度，但前者的维护性和直观性都不如包裹元素的方案。

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