如何指定多行flexbox布局的行高并拉伸其余行 [英] How to specify row height of multi-line flexbox layout and have remaining rows stretch
本文介绍了如何指定多行flexbox布局的行高并拉伸其余行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个多行flexbox布局,我想在其中指定行之一的高度,其余的行可以拉伸以填充.如果我在下面设置蓝色div的高度,则会得到一堆空白.
I have a multi-line flexbox layout where I would like to specify the height of one of the rows and have the remaining rows stretch to fill. If I set the height of the blue div below, I get a bunch of empty space.
#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>
推荐答案
If you know there will be exactly three rows, you can use calc
:
#three {
height: 15px;
}
#one, #two, #four, #five {
height: calc((100% - 15px) / 2);
}
#container {
display: flex;
flex-wrap: wrap;
height: 500px;
width: 500px;
}
#one, #two, #four, #five {
flex: 1 1 49%;
height: calc((100% - 15px) / 2);
}
#three {
flex: 1 1 99%;
background-color: blue;
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>
这篇关于如何指定多行flexbox布局的行高并拉伸其余行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文