如何在多行 flexbox 包装布局中仅垂直拉伸一行？ [复制]答案

【问题标题】：How to vertically stretch only one row in a multi-line flexbox wrapped layout? [duplicate]如何在多行 flexbox 包装布局中仅垂直拉伸一行？ [复制]
【发布时间】：2023-04-01 23:53:02
【问题描述】：

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

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

在我的尝试中，外部容器是 flex: row wrap，div 3 是 align-self: flex-end，我尝试将 align-self: stretch 应用于 div 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。灰色区域是我想用蓝色和黄色填充的区域。

【问题讨论】：

你不能使用 flexbox，使用 CSS 网格：jsfiddle.net/3h1L45m9
谢谢，但我试图避免网格

标签： css layout flexbox stretch

【解决方案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>

【讨论】：

我想我会采用这种方法...我曾考虑过，但我想知道是否可以使用其他布局。
很高兴能帮上忙。