如何使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屋！