Flexbox is not applying space between divs

Question

I am applying Flexbox concepts but there is something I am struggling with here, I applied display: flex; and applied the direction to be column.

Now as the main axis is column I made justify-content as space between but this space between is not applied to make space between navbar and section-main and 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>

You need to add some `height` for `page-container` explicitly. — Mohammad Usman, Jul 21 '19 at 08:13
there's no any `height` for the `.page-container` to use it to split space evenly between the flex elements. You'll have to declare the `height` explicitly (`min-height` would be better) . — ThS, Jul 21 '19 at 08:18

score 3 · Accepted Answer · answered Jul 21 '19 at 08:18

The problem is that the flexbox container calculates the height based on available content. If you set the parent height to 100% it will adjust accordingly. Note that I added html, body to height: 100% in order to calculate full page height.

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>

Yes it was the problem. Thank you for clarification. – tarek hassan Jul 21 '19 at 08:45 — tarek hassan, Jul 21 '19 at 08:45

score -1 · Answer 2 · answered Jul 21 '19 at 08:20

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

Flexbox is not applying space between divs

2 Answers2