我有一个多行 Flexbox 布局,我想在其中指定其中一行的高度,并让其余行拉伸(stretch)以填充。如果我设置下面蓝色 div 的高度,我会得到一堆空白空间。
#container {
display: flex;
flex-wrap: wrap;
height: 500px;
width: 500px;
}
#one,
#two,
#four,
#five {
flex: 1 1 49%;
}
#three {
flex: 1 1 99%;
background-color: blue;
height: 15px;
max-height: 15px;
}
#one {
background-color: green;
}
#two {
background-color: yellow;
}
#four {
background-color: orange;
}
#five {
background-color: violet;
}
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
最佳答案
据我所知,这需要行。
#container {
display: flex;
flex-wrap: nowrap;
height: 500px;
width: 500px;
flex-direction: column;
}
.row {
flex: 1 0 auto;
display: flex;
flex-direction: row;
}
.row:nth-child(2) {
height: 15px;
max-height: 15px;
}
.row div {
flex: 1 0 auto;
}
#one {
background-color: green;
}
#two {
background-color: yellow;
}
#three {
background-color: blue;
}
#four {
background-color: orange;
}
#five {
background-color: violet;
}
<div id="container">
<div class="row">
<div id="one"></div>
<div id="two"></div>
</div>
<div class="row">
<div id="three"></div>
</div>
<div class="row">
<div id="four"></div>
<div id="five"></div>
</div>
</div>
关于css - 如何指定多行 Flexbox 布局的行高并使剩余行拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31392254/