我正在使用 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.
正如您在示例中看到的，列和标题之间存在间隙。我的目标是垂直拉伸列以填充容器中的整个空白空间。
我可以通过设置来实现height财产就像calc(100% - <header-height>)。这是正确的方法吗？
我只是尝试使用“flex”样式并设置align-items: stretch到容器和align-self: stretch到列但没有成功。我可能错过了尝试以这种方式实现它的东西吗？
我认为指定flex-direction as column在这种情况下是合适的。
第二行本身就是一个flex元素与flex-direction: row。您可以使用以下命令填充剩余空间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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
