Flexbox 未在 div 之间应用空间 [重复]答案

【问题标题】：Flexbox is not applying space between divs [duplicate]Flexbox 未在 div 之间应用空间 [重复]
【发布时间】：2019-11-29 13:37:55
【问题描述】：

我正在应用 Flexbox 概念，但我在这里遇到了一些困难，我应用了 display: flex; 并将方向应用为列。

现在由于主轴是列，我将justify-content 设置为之间的空间，但此空间不应用于在navbar 和section-main 和footer 之间留出空间。

.page-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.section-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<html>

  <body>
    <div class="page-container">
      <div class="navbar">
        <div class="brand">
          Oka brand
        </div>
        <div class="nav-buttons">
          nav buttons
        </div>
      </div>

      <div class="section-main">
        <div class="left-nav">
          left nav
        </div>
        <div class="middle-section">
          middle section
        </div>
        <div class="right-nav">
          nav icons
        </div>
      </div>

      <div class="footer">
        footer
      </div>

    </div>
  </body>

</html>

【问题讨论】：

你需要为page-container明确添加一些height。
height 没有任何 .page-container 可以使用它在 flex 元素之间平均分配空间。您必须明确声明height（min-height 会更好）。

标签： css flexbox

【解决方案1】：

问题在于flexbox 容器根据可用内容计算高度。如果您将父级高度设置为 100%，它将相应地进行调整。请注意，我将html, body 添加到height: 100% 以计算整页高度。

html,
body {
  height: 100%;
}

* { /* Reset properties to avoid any browser related spacing */
  margin: 0;
  padding: 0;
}

.page-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Calculate from parent's height */
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.section-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<html>

<body>
  <div class="page-container">
    <div class="navbar">
      <div class="brand">
        Oka brand
      </div>
      <div class="nav-buttons">
        nav buttons
      </div>
    </div>

    <div class="section-main">
      <div class="left-nav">
        left nav
      </div>
      <div class="middle-section">
        middle section
      </div>
      <div class="right-nav">
        nav icons
      </div>
    </div>

    <div class="footer">
      footer
    </div>

  </div>
</body>

</html>

【讨论】：

是的，这就是问题所在。谢谢你的澄清。

【解决方案2】：

.page-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.section-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 1em 0;
}

<html>

  <body>
    <div class="page-container">
      <div class="navbar">
        <div class="brand">
          Oka brand
        </div>
        <div class="nav-buttons">
          nav buttons
        </div>
      </div>

      <div class="section-main">
        <div class="left-nav">
          left nav
        </div>
        <div class="middle-section">
          middle section
        </div>
        <div class="right-nav">
          nav icons
        </div>
      </div>

      <div class="footer">
        footer
      </div>

    </div>
  </body>

</html>

【讨论】：