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

Question

这个 one 有一个类似的问题，但他想要一个固定的行，没有人可以使用纯 flexbox 提供答案。

我有一个简单的布局，有 3 个 divs，我希望第一个和第二个在第一行，然后 3 在第二行，占 100vw；我希望第三个 div （底部的那个）的高度尽可能小（只有里面文本的高度），所以 divs 1 和 2 会被拉伸以填满space。问题是，当我尝试这样做时，除非我拉伸 div 3.

，否则我无法填充的行之间有一个空的 space

在我的尝试中，外部容器是 flex: row wrap，div 3 是 align-self: flex-end，我尝试将 align-self: stretch 应用到 divs 1 和2 但随后就不会伸展。我怎样才能做到这一点？

这是我的。

HTML:

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

CSS

* {
  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;
}

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

Answer 1

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

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

.container {
  background: #AAA;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}

.container1 {
  display: flex;
  flex: 1 0;
}

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

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

.third {
  background: lightgreen;
}

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

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

How to vertically stretch only one row in a multi-line flexbox wrapped layout?

css

layout

stretch

flexbox