Flexbox - 将一行中的 2 个项目与下一行的第三个项目全宽对齐

Question

我是连续三项。我想保留前两个项目占该行的 50% 50%，并将下一个第三个项目推到下一行并覆盖该行的 100%。

 .container {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
}

.div1, .div2 {
  flex: 0 0 50%;
}
.div3{ 
  flex: 1;
}

html标记

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

我想要的是前两个元素排在一起，第三个元素被推到下一行，覆盖 100%；

Answer 1

你可以这样做。

.container {
      display: flex;
      flex-wrap: wrap;
}

.container div {
 height: 20px;
 
}

.div1, .div2 {
  flex: 0 0 50%;
}
div.div3{ 
  flex: 0 0 100%;
  
}

div.div1 {
 background-color:green;
}

div.div2 {
 background-color: yellow;
}

div.div3 {
 background-color: red;
}

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