如何设置flexbox容器的高度，使其使用“剩余空间”

我很努力地理解flexbox容器如何与其他块交互。只需在我的页面上放置一个flexbox，我就可以做我想做的事。但是当我混合其他页面元素时，事情变得很奇怪。问题似乎是空间分配。如何设置flexbox容器的高度，使其使用“剩余空间”

我的Flexbox容器似乎需要一个明确的高度。如果我没有指定，我不会得到包装行为。我不确定如何指定flexbox容器的高度。

如果我将flexbox容器的高度设置为100％，它将根据需要进行包装，但我被滚动条卡住以至于无法使用：我已经分配了100％以上的高度。我想在flexbox容器上分配100px。所以我需要使Flexbox容器的高度达到100％ - 100px。我无法混合绝对和相对测量。而且，往下看，我宁愿不必一定要做这个数学计算，它会成为一个维护的麻烦。

下面是一个事情出错的例子。我想在页面顶部有一些说明。说明应该跨越页面的宽度。在下面的空间中，我想要一组按钮。根据需要，按钮应该换行以使用多列。

我可以通过按钮flexbox容器内的说明使其工作。但是，它不会像我想要的那样100％，它会因我的按钮而变得混乱。

<html> 
    <head> 
     <style> 
      * { 
       margin: 0; 
       padding: 0; 
       border: 1px solid #A00; 
      } 
      .instructions { 
       height: 100px; 
       background: linear-gradient(to bottom, #ffffff 0%, #999 100%); 
      } 
      .container { 
       display: flex; 
       flex-direction: column; 
       flex-wrap: wrap; 
       height: 80%;   
      } 
      .button { 
       width: 200px; 
       height: 50px; 
       margin: 10px; 
       background: linear-gradient(to bottom, #ffffff 0%, #BBB 100%);   
       border: 1px solid #CCC; 
       text-align: center; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="instructions">Instructions go here.</div> 
     <div class="container">    
      <div class="button">This is Button 1</div> 
      <div class="button">Thar be Button 2</div> 
      <div class="button">Yarr, button 3</div> 
      <div class="button">Hey that is a nice looking button.</div> 
      <div class="button">Click Me!</div> 
     </div> 
    </body> 
</html>

来源

2017-03-17 Todd Hivnor

这是你试图做什么？ http://codepen.io/gc-nomade/pen/jBYbYZ。可以从http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486或http://stackoverflow.com/questions/23090136/how-can- i-make-my-flexbox-layout-take-100-vertical-space/23090449如果不重复 –

你必须给部分的高度，以限制其造成的按钮来包装，否则挠性元件只会增长，以适应它里面任何的高度。

我会在flex容器上使用height: calc(100vh - 100px)以使其占用所有可用空间。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.instructions { 
 
    height: 100px; 
 
    background: linear-gradient(to bottom, #ffffff 0%, #999 100%); 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: calc(100vh - 100px); 
 
} 
 

 
.button { 
 
    width: 200px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background: linear-gradient(to bottom, #ffffff 0%, #BBB 100%); 
 
    border: 1px solid #CCC; 
 
    text-align: center; 
 
}

<div class="instructions">Instructions go here.</div> 
 
<div class="container"> 
 
    <div class="button">This is Button 1</div> 
 
    <div class="button">Thar be Button 2</div> 
 
    <div class="button">Yarr, button 3</div> 
 
    <div class="button">Hey that is a nice looking button.</div> 
 
    <div class="button">Click Me!</div> 
 
</div>

或者，你可以限制body的高度100vh，使其display: flex; flex-direction: column并设置.containerflex-grow: 1所以它会占用的可用空间。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
.instructions { 
 
    height: 100px; 
 
    background: linear-gradient(to bottom, #ffffff 0%, #999 100%); 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    flex-grow: 1; 
 
} 
 

 
.button { 
 
    width: 200px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background: linear-gradient(to bottom, #ffffff 0%, #BBB 100%); 
 
    border: 1px solid #CCC; 
 
    text-align: center; 
 
}

<div class="instructions">Instructions go here.</div> 
 
<div class="container"> 
 
    <div class="button">This is Button 1</div> 
 
    <div class="button">Thar be Button 2</div> 
 
    <div class="button">Yarr, button 3</div> 
 
    <div class="button">Hey that is a nice looking button.</div> 
 
    <div class="button">Click Me!</div> 
 
</div>

来源

2017-03-17 23:59:44

谢谢你对于为什么行为存在的评论是有道理的。哇有很多要学习CSS！我没有意识到我可以使用calc（）。我想我会尝试第二种解决方案，由于嵌套柔性盒，似乎需要更多思考。但可能更可维持更长时间。我想设置一些东西，这样他们就可以在路上工作了。无论如何，谢谢你的帮助，迈克尔！ –

@ToddHivnor欢迎您:) –

如何设置flexbox容器的高度，使其使用“剩余空间”

回答

相关问题