Question

我试图通过top-nav使bot-nav和justify-content: space-between分区垂直分开。但是，它没有做任何事情。有人可以指出我做错了吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

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

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

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

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-box 主轴方向，即flex-direction: row

你需要使用align-content，它应该适用于交叉轴，flex-direction: column。

参考Flexbox|Codrops Reference > align-content

为什么在没有做任何事情之间存在合理的内容空间？

3 个答案: