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

Question

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

我正试图通过使用使得top-nav和bot-nav分区垂直分开justify-content: space-between.但是,它没有做任何事情.有人能指出我做错了吗？

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Sti*_*ers 7

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

在您的例子nav.flex-container不具有任何高度定义,你可以设置一个百分比n%(如您已设置100vh上header,父元素)或vh价值给它.

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

Run Code Online (Sandbox Code Playgroud)

更新了笔 - 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;
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，2 月前
查看次数：	5755 次
最近记录：	10 年，2 月前