Css 如何在多行flexbox包装布局中仅垂直拉伸一行？_Css_Layout_Flexbox_Stretch

Css 如何在多行flexbox包装布局中仅垂直拉伸一行？

css layout

Css 如何在多行flexbox包装布局中仅垂直拉伸一行？,css,layout,flexbox,stretch,Css,Layout,Flexbox,Stretch,这有一个类似的问题，但他想要一个固定的行，并且没有人能够使用纯flexbox提供答案我有一个简单的布局，有3个分区，我希望第一排和第二排在第一排，然后第三排在第二排，乘坐100vw；我希望第三个div（底部的一个）的高度尽可能小（只有里面文本的高度），因此，div 1和div 2会拉伸以填充空间。问题是，当我尝试这样做时，行之间有一个空白，除非我拉伸div3，否则无法填充在我的尝试中，外部容器是flex:row wrap，div 3是align-self:flex-end，我尝试将alig

这有一个类似的问题，但他想要一个固定的行，并且没有人能够使用纯flexbox提供答案

我有一个简单的布局，有3个分区，我希望第一排和第二排在第一排，然后第三排在第二排，乘坐100vw；我希望第三个div（底部的一个）的高度尽可能小（只有里面文本的高度），因此，div 1和div 2会拉伸以填充空间。问题是，当我尝试这样做时，行之间有一个空白，除非我拉伸div3，否则无法填充

在我的尝试中，外部容器是

flex:row wrap

，div 3是

align-self:flex-end

，我尝试将

align-self:stretch

应用于div 1和div 2，但就是不拉伸。我怎样才能做到这一点

这是我的

HTML:

这是我的密码。灰色区域是我想要用蓝色和黄色填充的区域

您是否考虑过为前两个元素再添加一个div

*{
字体大小：1.5rem；
保证金：0；
填充：0；
}
.集装箱{
背景：#AAA；
高度：100vh；
显示器：flex；
弯曲方向：立柱；
对齐内容：拉伸；
}
.集装箱1{
显示器：flex；
弹性：10；
}
.首先{
背景：浅蓝色；
宽度：30%；
}
.第二{
背景：浅黄色；
宽度：70%；
}
.第三{
背景：浅绿色；
}


弗斯特
第二
第三

您不能使用flexbox，请使用CSS网格：谢谢，但我正在尝试避免使用网格。我想我会采用这种方法。。。我已经考虑过了，但我想知道是否可以使用其他的布局。我很高兴我能提供帮助。

<html>
  <body>
    <div class="container">
      <div class="first">First</div>
      <div class="second">Second</div>
      <div class="third">Third</div>
    </div>
  </body>
</html>

* {
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}

.container {
  background: #AAA;
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
}

.first {
  background: lightblue;
  width: 30%;
}

.second {
  background: lightyellow;
  width: 70%;
}

.third {
  background: lightgreen;
  width: 100vw;
  align-self: flex-end;
}