使用Flexbox能否实现动态宽度元素自动填充容器空白区域？

结论 #

仅使用Flexbox无法实现你要的自动填充空白区域的效果。

原因说明 #

Flexbox属于一维布局模型，只会沿着水平/垂直的单一主轴按元素顺序依次排列，同一行剩余空间放不下下一个元素时，就会触发整体换行，不会回溯填充上一行的剩余空位。
你当前的元素顺序是红→蓝→黄→绿：第一行放完宽度100px的红色块后，剩余100px空间放不下宽度200px的蓝色块，因此第一行剩余位置空置，蓝色块单独占第二行，黄色、绿色块依次排列在第三行，这是Flexbox的正常表现。

替代实现方案 #

如果要实现自动填充空位的效果，推荐使用CSS Grid布局，它是二维布局模型，通过grid-auto-flow: dense属性即可实现自动检索空白位置填充的效果，代码修改如下：

CSS代码 #

.grid-container {
  display: grid;
  width: 200px;
  height: 240px;
  background: grey;
  grid-template-columns: repeat(2, 100px);
  /* 核心属性：自动填充空白 */
  grid-auto-flow: dense;
  align-content: start;
}

.grid-item {
  height: 100px;
}

.red {
  background: red;
}

.blue {
  background: blue;
  /* 占满两列 */
  grid-column: span 2;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

HTML代码 #

<div class="container">
  <div class="grid-container">
    <div class="grid-item red"></div>
    <div class="grid-item blue"></div>
    <div class="grid-item yellow"></div>
    <div class="grid-item green"></div>
  </div>
</div>

如果一定要强制用Flexbox实现，只能在渲染阶段动态识别元素宽度，调整DOM元素的排列顺序，把宽度50%的元素优先排列到上一行的空位，实现成本远高于直接使用Grid布局。

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