如何使Flex元素完全展开以填充包含元素

如何使Flex元素完全展开以填充包含元素

本文介绍了如何使Flex元素完全展开以填充包含元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我的代码。



我希望元素 .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元素完全展开以填充包含元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-22 15:52