Flexbox is not applying space between divs [duplicate]

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
– Mohammad Usman, Commented Jul 21, 2019 at 8: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
– ThS, Commented Jul 21, 2019 at 8:18

m4n0 · Accepted Answer · 2019-07-21 08:18:16Z

3

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>

answered Jul 21, 2019 at 8:18

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tarek hassan Over a year ago

Yes it was the problem. Thank you for clarification.

live627 · Accepted Answer · 2019-07-21 08:20:35Z

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

Collectives™ on Stack Overflow

Flexbox is not applying space between divs [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related