为啥 justify-content space-between 啥都不做？
Posted
技术标签:
【中文标题】为啥 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
【问题讨论】：
【参考方案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 的代表。我知道什么 ;-) 感谢您的提醒！以上是关于为啥 justify-content space-between 啥都不做？的主要内容，如果未能解决你的问题，请参考以下文章
justify-content:space-between 不起作用，Nextjs 应用程序
使用 justify-content: space-evenly 时如何不向左溢出
justify-content: space-between 未能按预期对齐元素
justify-content space-between最后一个元素不居右对齐
Chrome 中是不是存在 justify-content: space-between 和 min-height 的错误？