如何用Flexbox让最后一个div换行并占100%宽度？

刚好之前处理过类似的Flex布局需求，不用新增容器的话，只需要对现有CSS做两处小修改就能实现你要的效果：

步骤1：给父容器开启换行 #

默认情况下Flex容器的flex-wrap属性是nowrap，所有子元素都会强制排在同一行。所以首先给.wrap加上flex-wrap: wrap，允许子元素在空间不足时自动换行：

.wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 新增：开启换行 */
}

步骤2：设置.four的Flex属性让它独占整行 #

给.four设置flex: 0 0 100%，这个属性的含义是：

• flex-grow: 0：不允许元素放大
• flex-shrink: 0：不允许元素缩小
• flex-basis: 100%：元素的基础宽度为100%

这样.four的宽度会占满整个容器的宽度，自然就会被挤到第二行，完整的.four样式如下：

.four {
  flex: 0 0 100%;
  /* 可选：如果需要给four内部做布局，可以加额外样式，比如：
  display: flex;
  justify-content: center;
  align-items: center;
  */
}

完整CSS代码示例 #

.wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.one { flex: 0 1 200px; }
.two { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; }
.three { display: flex; flex: 0 1 200px; justify-content: flex-end; }
.four {
  flex: 0 0 100%;
}

这样修改后，就能实现你想要的布局：第一行是one、two、three，第二行four占满100%宽度，完全不需要新增额外的容器。

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