Question

我很难理解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>

Answer 1

你必须给这个部分一个高度来限制它以使按钮包裹，否则flex元素将会增长到适合它内部的任何高度。

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

或者，您可以将body的高度限制为100vh，将其设为display: flex; flex-direction: column并在flex-grow: 1设置.container，这样就可以占用空间。

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

如何设置Flexbox容器的高度，以便它使用“剩余空间”

1 个答案: