Flexbox中如何设置first-child占80%宽、第二个div占20%宽且第二行全宽

核心实现逻辑非常简单，不需要复杂计算，按以下规则配置即可：

• 父级flex容器必须开启flex-wrap: wrap，允许子元素折行，否则所有子元素会被强制压缩在同一行
• 首行第一个子元素设置固定伸缩基准为80%，关闭自动放大、缩小属性，避免被其他元素挤占空间
• 首行第二个子元素设置固定伸缩基准为20%，同样关闭自动伸缩，和第一个元素刚好占满首行整宽
• 第二行的子元素设置伸缩基准为100%，会自动折到第二行占满整行宽度

完整代码示例 #

HTML结构 #

<div class="flex-box">
  <div class="col-80">首行80%宽度元素</div>
  <div class="col-20">首行20%宽度元素</div>
  <div class="col-full">第二行满宽元素</div>
</div>

CSS样式 #

.flex-box {
  display: flex;
  flex-wrap: wrap; /* 必开：允许子元素换行 */
  /* 不需要元素间留白可以删掉gap属性，需要留白的话记得对应调小下方col-80、col-20的宽度占比，保证总宽度不超100% */
  gap: 0;
}

.col-80 {
  flex: 0 0 80%; /* 不放大、不缩小、基准宽度80% */
  /* 以下是装饰样式，可按需修改 */
  padding: 2rem;
  background: #f0f9ff;
  box-sizing: border-box;
}

.col-20 {
  flex: 0 0 20%; /* 不放大、不缩小、基准宽度20% */
  /* 装饰样式 */
  padding: 2rem;
  background: #e0f2fe;
  box-sizing: border-box;
}

.col-full {
  flex: 0 0 100%; /* 不放大、不缩小、基准宽度100% */
  /* 装饰样式 */
  padding: 2rem;
  background: #bae6fd;
  box-sizing: border-box;
}

避坑提示：所有子元素建议加上box-sizing: border-box，避免内边距、边框撑大元素实际宽度，导致总宽度超过100%出现非预期折行。如果设置了gap属性，比如gap值为2%，就把col-80的宽度改成79%、col-20改成19%，加上2%的空隙总宽度刚好100%，不会错位。

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