html - 使用 Flexbox 在具有共享标题的两列布局中拉伸(stretch)列

Question

我正在使用 Flexbox 创建带有标题行的两列布局。

* {
  box-sizing: border-box;
  position: relative;
}

.container {
  border: 2px solid gray;
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}

.header {
  flex-basis: 100%;
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.column1 {
  flex-basis: 150px;
  /* height: calc(100% - 50px); */
  border: 2px solid green;
}

.column2 {
  /* height: calc(100% - 70px); */
  flex: 1;
  border: 2px solid orange;
}

<div class='container'>
  <div class='header'>it's a header</div>
  <div class='column1'>column 1</div>
  <div class='column2'>column 2</div>
</div>

欢迎查看完整示例 here .

正如您在示例中看到的，列和标题之间存在间隙。我的目标是垂直拉伸(stretch)列以填充容器中的整个空白空间。我可以通过设置height来实现它属性如 calc(100% - <header-height>) 。这是正确的方法吗？

我只是尝试使用“flex”样式并设置 align-items: stretch到容器和 align-self: stretch到列但没有成功。我可能错过了尝试以这种方式实现它的东西吗？

Answer 1

我认为在这种情况下将 flex-direction 指定为 column 是合适的。第二行本身就是一个带有 flex-direction: row 的 flex 元素。您可以使用 flex: 1 填充剩余空间，这相当于 flex-grow: 1。

* {
  box-sizing: border-box;
}

.container {
  border: 2px solid gray;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
}

.header {
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.subcontainer {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.column1 {
  flex-basis: 150px;
  border: 2px solid green;
}

.column2 {
  flex: 1;
  border: 2px solid orange;
}

<div class='container'>
  <div class='header'>it's a header</div>
  <div class="subcontainer">
    <div class='column1'>column 1</div>
    <div class='column2'>column 2</div>
  </div>
</div>