使用柔性箱的共享标头两列布局中的拉伸列
使用柔性箱的共享标头两列布局中的拉伸列
提问于 2018-06-14 05:59:05
我正在使用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设置为列，但没有成功。我是不是错过了以这种方式实现它的东西？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-14 06:22:22
如下图所示
* {
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>
Stack Overflow用户
发布于 2018-06-14 06:51:19
在这种情况下，我认为将flex-direction指定为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50850548
复制相关文章
相似问题
腾讯云开发者
