Flexbox布局问题：前两元素各占50%，第三元素独占一行满宽

嘿，我来帮你搞定这个布局问题！你当前代码的核心问题在于flex-wrap: nowrap——这个属性会强制所有flex子元素挤在同一行，完全不给第三个元素换行的机会，再加上.div3的flex设置没贴合需求，才导致布局达不到预期。

下面是修正后的完整方案：

HTML结构（无需修改） #

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

调整后的CSS代码 #

.container {
  display: flex;
  flex-wrap: wrap; /* 关键：开启换行功能 */
}
.div1, .div2 {
  flex: 0 0 50%; /* 固定占50%宽度，不伸缩 */
  box-sizing: border-box; /* 避免边框/内边距撑破宽度 */
  /* 可选：加边框方便直观查看布局 */
  border: 1px solid #ddd;
}
.div3 {
  flex: 0 0 100%; /* 强制占满整行宽度 */
  box-sizing: border-box;
  /* 可选：加不同颜色边框区分 */
  border: 1px solid #f55;
}

关键细节说明： #

• flex-wrap: wrap是核心修复项：开启后，当子元素总宽度超过容器时会自动换行，前两个元素各占50%刚好填满一行，第三个元素自然会换到下一行
• flex: 0 0 50%和flex: 0 0 100%的作用：0 0表示禁止元素伸缩，后面的百分比固定元素宽度，确保布局精准
• box-sizing: border-box是实用补充：让元素的边框、内边距包含在设定的宽度内，不会出现宽度溢出的问题

如果你觉得用宽度属性更直观，也可以把.div3的flex: 0 0 100%换成width: 100%，效果完全一致~

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