时间戳

首页 > 解决方案 > Flexbox 没有在 div 之间应用空间

css - Flexbox 没有在 div 之间应用空间

问题描述

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

现在，由于主轴是列，因此我将其设置justify-content为之间的空间，但该空间之间的空间不适用于在navbarandsection-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>

标签： cssflexbox

解决方案

问题是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>

推荐阅读