使用弹性框使用共享标题拉伸两列布局中的列

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>

请随时在此处查看完整示例。

正如您在示例中所看到的，列和标题之间存在间隙。我的目标是垂直拉伸列以填充容器中的整个空白空间。 我可以通过设置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>

Answer 2

像下面这样做

* {
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
border: 2px solid gray;
display: flex;
flex-direction: column;
height: 100%;
}
.header {
width: 100%;
border: 2px solid magenta;
height: 50px;
line-height: 50px;
text-align: center;
}
.body-container {
display: flex;
width: 100%;
flex: 1;
}
.column1 {
width: 50%;
border: 2px solid green;
}
.column2 {
width: 50%;
border: 2px solid orange;
}

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