为什么 justify-content space-between 什么都不做？

Question

我正在尝试使用 justify-content: space-between 使 top-nav 和 bot-nav 分区垂直分隔。但是，它什么也没做。有人可以指出我做错了什么吗？

@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

Answer 1

块元素的高度默认为块内容的高度，除非您定义了特定的高度。 flexbox justify-content 定义了浏览器如何在 flex 项目之间和周围分布 space。所以默认情况下它不会对 flex-direction:column 产生任何影响。

在您的示例中 nav.flex-container 没有定义任何高度，您可以设置一个百分比 n%（因为您已经在 header 上设置了 100vh，父元素）或 vh 值。

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

更新笔 - https://codepen.io/anon/pen/LGRqzy

或者，也将 header 设置为 display:flex，并在 nav.flex-container 上添加 flex:1（增长）。

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

更新笔 - https://codepen.io/anon/pen/WrGPMW

Answer 2

您应该为 .flex-container 添加高度，然后将 overflow-y: scroll 添加到页眉以使导航可滚动。

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;
}

Answer 3

justify-content只在flex-boxmain-axis方向起作用，意思是flex-direction: row

您需要使用 align-content，它应该适用于 cross-axis、flex-direction: column.

引用Flexbox|Codrops Reference > align-content

为什么 justify-content space-between 什么都不做？

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

html

css

flexbox