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

【问题标题】：Why is justify-content space-between not doing anything?为什么 justify-content space-between 什么都不做？
【发布时间】：2016-04-01 15:19:04
【问题描述】：

我正在尝试使用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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

块元素的高度默认为块内容的高度，除非您定义了特定高度。 flexbox justify-content 定义了浏览器如何在弹性项目之间和周围分配空间。所以默认情况下它不会对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

【讨论】：

谢谢伙计。不太热衷于您的第一个答案，但第二个正是我想要的。谢谢。
我知道，但是第一个解释了为什么它不适用于您的代码。显然嵌套的 flex 是赢家：D
这个解决方案可能会导致 SuperDicko 想要的结果（这显然很酷），但不能解释为什么 justify-content 没有按预期工作。请为您的答案添加一个模式以供将来使用...
@RenevanderLende 对我来说是这样解释的，因为我们通常将它与flex-direction:row 一起使用默认值，并且块元素的宽度始终为 100%。但是对于column，其关键是高度而不是宽度，并且在正常内容模式下默认情况下没有定义高度。
我明白了，但是当您期望元素“间隔”时，nav.flex-container 和 flex-direction: column 中的 justify-content: space-between 是错误的。我经常在问题中看到这一点，因此我要求扩大你的回答提到这一点，以便未来的读者可以从中受益。（OP特别提到justify-content）

【解决方案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;
}

【讨论】：

我试过你的方法，height: 100% 似乎给了它与视口相同的高度，并且在底部被切断了。我做了一支新笔给你看。

【解决方案3】：

justify-content只作用于flex-box 主轴方向，意思是flex-direction: row

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

参考Flexbox|Codrops Reference > align-content

【讨论】：

我想你可能有这个错误。主轴可以是垂直的或水平的。横轴可以是垂直的或水平的。 justify-content 属性适用于两个 flex 方向：row 和 column。同样，align-content（和align-items）也适用于两个弯曲方向。
@Michael_B，虽然我不确定 100%，但我将其解释为 justify-content 与 row 和 align-content 与 column 相关无论轴的方向如何。但与此同时，您可能是对的，这是我的待办事项清单上的另一个解决方案。为简单起见，我省略了进一步的解释并添加了参考。但是，嘿，你有超过 11K 的代表。我知道什么 ;-) 感谢您的提醒！