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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:29:48+0000

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

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags