能否让flex列的子元素占满flex容器的100%宽度？

方法一：调整DOM结构（推荐） #

把红色盒子从.a容器中移出，作为外层flex容器的直接子项，利用flex布局的换行特性让它占满整行：

修改后的HTML代码：

<div class="container">
  <div class="a">
    <div class="box">
      A
    </div>
    <div class="box">
      C
    </div>
  </div>
  <div class="b">
    <p>Some text here</p>
  </div>
  <div class="box fw">
    B
  </div>
</div>

对应的CSS调整：

.container {
  display: flex;
  width: 80%;
  margin: auto;
  column-gap: 1em;
  outline: 1px solid black;
  flex-wrap: wrap; /* 允许子项换行 */
}

.a {
  background: #f002;
  flex: 3;
}
.b {
  background: #00f2;
  flex: 2;
}
.box {
  background: #f0f2;
  margin: 1em 0;
  padding: 1em;
}
.fw {
  background: red;
  flex: 0 0 100%; /* 强制占满整行宽度 */
}

方法二：绝对定位法（无需修改DOM） #

给外层容器添加相对定位，让红色盒子基于容器定位，左右拉伸至容器边缘：

CSS调整：

.container {
  display: flex;
  width: 80%;
  margin: auto;
  column-gap: 1em;
  outline: 1px solid black;
  position: relative; /* 设置定位参考 */
}

.a {
  background: #f002;
  flex: 3;
}
.b {
  background: #00f2;
  flex: 2;
}
.box {
  background: #f0f2;
  margin: 1em 0;
  padding: 1em;
}
.fw {
  background: red;
  position: absolute;
  left: 0;
  right: 0;
  margin: 1em auto; /* 保持上下间距，左右对齐容器 */
  box-sizing: border-box; /* 确保padding不超出容器宽度 */
}

两种方法对比：

• 方法一遵循flex布局语义，结构清晰，不会影响其他元素的文档流，优先推荐。
• 方法二适合无法修改DOM结构的场景，但红色盒子会脱离文档流，需要注意与其他元素的间距避免重叠。

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