如何使Flex元素完全展开以填充包含元素? [英] How to make a flex element fully expand to fill the containing element?
问题描述
这是我的代码。
我希望元素 .container
完全展开并占据 .toplevel的区域
。
.toplevel {height:100%; min-height:800px; border:solid 1px blue;}。container {display:flex;边框:实心1px红色;身高:100%; flex:0 1 auto; flex-direction:列; // min-height:800px;}。up {display:flex; flex:1 1 auto;}。down {display:flex; flex:0 1 auto;}
< div class = 顶层 > < div class =container> < div class =up>这是< / div> < div class =up>这是关闭< / div> < / div>< / div>
像
.container
更大的高度明智的唯一方法是定义一个 min-height
。这太不灵活了,因为我将为不同的设备形态因素提供不同的价值。 我该如何解决它? .toplevel 并从 .container
中移除 height:100%
。
这项工作基于flex行项目的高度行为可以通过 align-items
属性进行控制的事实。因为它默认有 stretch
,它会填满它的父母身高。
在Flexbox中,最好使用自己的属性而不是 height
/ width
。通过这样做,您还可以获得更好的跨浏览器支持。
Stack代码段
.toplevel {height:100%; min-height:800px;边框:实心1px蓝色;显示:flex; / * added * /}。container {display:flex;边框:实心1px红色; / *身高:100%;删除* / flex:1 1 auto; / *改变了,flex row item需要增长值为1来填充其父宽度* / flex-direction:column;}。 flex:1 1 auto;}。down {display:flex; flex:0 1 auto;}
< div class = 顶层 > < div class =container> < div class =up>这是< / div> < div class =down>这是关闭< / div> < / div>< / div>
Here is my code.
I want the element .container
to fully expand and occupy the area of .toplevel
.
.toplevel {
height: 100%;
min-height: 800px;
border: solid 1px blue;
}
.container {
display: flex;
border: solid 1px red;
height: 100%;
flex: 0 1 auto;
flex-direction: column;
// min-height: 800px;
}
.up {
display: flex;
flex: 1 1 auto;
}
.down {
display: flex;
flex: 0 1 auto;
}
<div class="toplevel">
<div class="container">
<div class="up">
This is up
</div>
<div class="up">
This is down
</div>
</div>
</div>
However it seems like the only way to make the .container
larger height-wise is to define a min-height
. It is too inflexible because I will have provide a different value for different device form factor.
How can I fix it?
Simpy add display: flex
to .toplevel
and remove height: 100%
from .container
.
This work based on the fact that flex row item's height behavior can be controlled with the align-items
property. As it by default has stretch
, it will fill its parents height.
As a note, in general, when it comes to Flexbox, it is preferable to make use of its own properties instead of height
/width
. By doing so you also get a better cross browser support.
Stack snippet
.toplevel {
height: 100%;
min-height: 800px;
border: solid 1px blue;
display: flex; /* added */
}
.container {
display: flex;
border: solid 1px red;
/*height: 100%; removed */
flex: 1 1 auto; /* changed, flex row item need the grow value
to be 1 to fill its parent's width */
flex-direction: column;
}
.up {
display: flex;
flex: 1 1 auto;
}
.down {
display: flex;
flex: 0 1 auto;
}
<div class="toplevel">
<div class="container">
<div class="up">
This is up
</div>
<div class="down">
This is down
</div>
</div>
</div>
这篇关于如何使Flex元素完全展开以填充包含元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!