我试图通过使用 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>最佳答案
block 元素的高度默认为 block 内容的高度，除非您定义了特定的高度。 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，并在 nav.flex 上添加 。 flex:1 (grow) -容器
header {
display: flex;
flex-direction: column;
}
nav.flex-container {
flex: 1;
}
关于html - 为什么 justify-content space-between 什么都不做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34482262/