如何消除双列flexbox文本布局中的空白区域？

当用flex容器实现双列文本布局时，文本单行显示正常，但换行后会出现多余空白。核心问题是默认flex子项会自动拉伸填充容器剩余空间，导致换行后留白。

解决方法 #

只需调整flex容器和子项的属性，让子项宽度仅适配自身内容：

修改后的CSS代码

.container {
  display: flex;
  flex-wrap: wrap; /* 允许子项在容器宽度不足时换行 */
}

.child {
  border: 1px solid blue;
  flex: 0 1 auto; /* 禁止拉伸、允许收缩，宽度随内容自动调整 */
}

代码解释 #

• flex-wrap: wrap：确保子项在容器宽度不够时自动换行，避免强行挤在一行
• flex: 0 1 auto：
  • flex-grow: 0：禁止子项拉伸填充容器剩余空间，从根源消除空白
  • flex-shrink: 1：允许子项在容器过窄时适当收缩，避免内容溢出
  • flex-basis: auto：让子项宽度由自身内容决定

完整示例代码 #

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  border: 1px solid blue;
  flex: 0 1 auto;
  margin: 4px; /* 可选，添加间距让布局更美观 */
}

HTML

<div class="container">
  <div class="child">assadfsadfsadfsadf assadfsadfsadfsadf</div>
  <div class="child">assadfsadfsadfsadf assadfsadfsadfsadf</div>
</div>

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