Why is justify-content space-between not doing anything?

Question

I'm trying to get the top-nav and bot-nav divisions to separate vertically by using justify-content: space-between. However, it isn't doing anything. Can someone point out what I'm doing wrong please?

@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
 html {
  font-family: 'Rock Salt', cursive;
}
.flex-container {
  display: flex;
}
header {
  width: 300px;
  height: 100vh;
  position: fixed;
  background-color: blue;
}
nav.flex-container {
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#logo-container {
  background-color: red;
  width: 100%;
}
#logo {
  margin: auto;
  padding: 10px 0;
}

<body>
  <div id="root-container">
    <header>
      <div id="logo-container" class="flex-container">
        <h2 id="logo">Name Goes Here</h2>
      </div>
      <nav class="flex-container">
        <div class="top-nav">
          <ul>
            <li>This is a list item</li>
            <li>This is a list item</li>
          </ul>
        </div>
        <div class="bot-nav">
          <ul>
            <li>This is a list item</li>
            <li>This is a list item</li>
          </ul>
        </div>
      </nav>
    </header>
  </div>
</body>

https://codepen.io/anon/pen/rxMPMN

Stickers · Accepted Answer · 2015-12-27T18:03:29.913

11

The height of a block element defaults to the height of the block's content, unless you define a specific height. And flexbox justify-content defines how the browser distributes space between and around flex items. So it won't have any effects with flex-direction:column by default.

In your example nav.flex-container doesn't have any height defined, you can set either a percentage n% (as you already set 100vh on header, the parent element) or vh value to it.

nav.flex-container {
    height: 80%; /*your value*/
}

Updated pen - https://codepen.io/anon/pen/LGRqzy

Or, set header to display:flex as well, and add flex:1 (grow) on nav.flex-container.

header {
    display: flex;
    flex-direction: column;
}
nav.flex-container {
    flex: 1;
}

Updated pen - https://codepen.io/anon/pen/WrGPMW

edited Dec 27 '15 at 18:03

answered Dec 27 '15 at 16:42

Stickers

75,527
23
147
186

Thanks mate. Wasn't too keen on your first answer, but the second one was exactly what I wanted. Thank you. – SuperDicko Dec 27 '15 at 17:20
I know, however the first one explains why it didn't work with your code. Obviously nested flex is the winner :D – Stickers Dec 27 '15 at 17:22
This solution may result in what SuperDicko wants (which obviously is cool), but is does not explain why **justify-content** is not working as expected. Please a a mod to your answer for future use... – Rene van der Lende Dec 27 '15 at 17:24
@RenevanderLende For me it explains, because we normally use it with `flex-direction:row` the default value, and the width is always 100% for a block element. However with `column` which the key is height not width, and height is not defined by default in a normal content mode. – Stickers Dec 27 '15 at 17:30
I get you, but `justify-content: space-between` in `nav.flex-container` with `flex-direction: column` is an error when you expect elements to be 'spaced between'. I see this quite often in questions, hence my request to extent your answer mentioning this so future readers can benefit from that. (The OP specifically mentioned `justify-content`) – Rene van der Lende Dec 27 '15 at 17:36

score 0 · Answer 2 · answered Dec 27 '15 at 17:02

0

You should add a height for .flex-container and then add overflow-y: scroll to the header to make the nav scrollable.

nav.flex-container
{
    height: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}


header
{
    width: $header-width;
    height: 100vh;
    position: fixed;
    background-color: blue;
    overflow-y: scroll;
}

answered Dec 27 '15 at 17:02

shadeed9

1,786
5
22
29

I tried your method and the height: 100% seems to give it the same height as the viewport, and it is cut off at the bottom. I made a new pen to show you. – SuperDicko Dec 27 '15 at 17:12

score 0 · Answer 3 · answered Dec 27 '15 at 17:19

0

justify-content only work in the flex-box main-axis direction, meaning flex-direction: row

You need to use align-content which is supposed to work for the cross-axis, flex-direction: column.

Reference Flexbox|Codrops Reference > align-content

answered Dec 27 '15 at 17:19

Rene van der Lende

4,992
2
14
25

I think you may have this incorrect. The **main-axis** can be vertical or horizontal. The **cross-axis** can be vertical or horizontal. The `justify-content` property works on both flex directions: `row` and `column`. Similarly, `align-content` (and `align-items`) work on both flex directions, as well. – Michael Benjamin Dec 27 '15 at 20:26
1

@Michael_B, while I am not 100% sure, I interpret it as `justify-content` is related to **row** and `align-content` to **column** whatever the direction of the axis. But at the same time, you may be right, another figure-out-item on my to-do list. It was for simplicity that I left out further explanation and added the reference. But hey, you've got the 11K+ reps., what do I know ;-) Thanks for the heads-up! – Rene van der Lende Dec 28 '15 at 03:40

Why is justify-content space-between not doing anything?

3 Answers3

Related