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

我是连续三项。我想将前两项保留为行的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%

你可以这样做

.container{
显示器：flex；
柔性包装：包装；
}
.货柜组{
高度：20px；
}
.div1、.div2{
弹性：0.50%；
}
div.div3{
弹性：0.100%；
}
第1分部{
背景颜色：绿色；
}
第2分部{
背景颜色：黄色；
}
第3分部{
背景色：红色；
}

您可以这样做

.container{
显示器：flex；
柔性包装：包装；
}
.货柜组{
高度：20px；
}
.div1、.div2{
弹性：0.50%；
}
div.div3{
弹性：0.100%；
}
第1分部{
背景颜色：绿色；
}
第2分部{
背景颜色：黄色；
}
第3分部{
背景色：红色；
}

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.div1、.div2{
宽度：50%；
}
.div3{
宽度：100%；
}

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.div1、.div2{
宽度：50%；
}
.div3{
宽度：100%；
}

flex-wrap:nowrap做的正是你不想做的事情。你也不需要在两者之间留出空间，因为没有空间
flex-wrap:nowrap做的正是你不想要的。你也不需要空间，因为没有空间解释会很好。值得指出的是，您所做/需要做的只是设置
flex-wrap:wrap
，而不是
nowrap
，并在
.div3
上设置
flex:0 100%
，这里我使用的是
flex:0 100%的速记第一个0用于
弹性增长
，第二个用于
弹性收缩
，最后一个用于将
弹性基础
设置为100%；希望这能帮助你@Adamusing
flex-wrap:wrap
so-flex-item包装成多行。对于这种情况很重要欢迎@MontyGoldy:）解释会很好。值得指出的是，您所做/需要做的只是设置
flex-wrap:wrap
，而不是
nowrap
，并在
.div3
上设置
flex:0 100%
，这里我使用的是
flex:0 100%的速记第一个0用于
弹性增长
，第二个用于
弹性收缩
，最后一个用于将
弹性基础
设置为100%；希望这能帮助你@Adamusing
flex-wrap:wrap
so-flex-item包装成多行。这对于这种情况很重要欢迎@MontyGoldy:）