如何告诉flexbox布局行消耗浏览器窗口中的剩余垂直空间?
我有一个3行的flexbox布局。前两行是固定高度,但第三行是动态的,我希望它增长到浏览器的整个高度。
我在第3行中有另一个flexbox,它创建了一组列。要正确调整这些列中的元素,我需要它们来理解浏览器的整个高度 - 例如背景颜色和底部的项目对齐。主要布局最终将类似于:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}
<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>
我尝试添加height
属性,当我将其设置为硬编号时,该属性会起作用,但在我将其设置为100%
时则不行。我理解height: 100%
不起作用,因为内容没有填满浏览器窗口,但是我可以使用flexbox布局复制这个想法吗?
答案 0 :(得分:88)
您应该将height
的{{1}}设置为html, body, .wrapper
(以便继承全高),然后将100%
值设置为大于flex
1
而不是其他人。
.row3
.wrapper, html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
background-color: blue;
}
#row3 {
background-color: green;
flex:2;
display: flex;
}
#col1 {
background-color: yellow;
flex: 0 0 240px;
}
#col2 {
background-color: orange;
flex: 1 1;
}
#col3 {
background-color: purple;
flex: 0 0 240px;
}
<强> DEMO 强>
答案 1 :(得分:13)
将包装器设置为高度100%
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
height: 100%;
}
并将第3行设置为flex-grow
#row3 {
background-color: green;
flex: 1 1 auto;
display: flex;
}
答案 2 :(得分:0)
让我向您展示100%有效的另一种方法。我还将为该示例添加一些填充。
<div class = "container">
<div class = "flex-pad-x">
<div class = "flex-pad-y">
<div class = "flex-pad-y">
<div class = "flex-grow-y">
Content Centered
</div>
</div>
</div>
</div>
</div>
.container {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
}
.flex-pad-x {
padding: 0px 20px;
height: 100%;
display: flex;
}
.flex-pad-y {
padding: 20px 0px;
width: 100%;
display: flex;
flex-direction: column;
}
.flex-grow-y {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
如您所见,在利用flex-grow和flex-direction属性的同时,我们可以通过一些包装器来实现此目的。
1:当父级“ flex-direction”为“行”时,其子级“ flex-grow”为水平工作。 2:当父级“ flex-direction”为“ columns”时,其子级“ flex-grow”垂直运行。
希望这会有所帮助
丹尼尔