为什么辩解内容之间的空间什么也没做? [英] Why is justify-content space-between not doing anything?
问题描述
我正在尝试使用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
除非您定义特定的高度，否则块元素的高度默认为块内容的高度. flexbox justify-content定义浏览器如何在flex项目之间及其周围分配空间.因此，默认情况下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
I'm trying to get the top-nav and bot-nav divisions to separate vertically by using justify-content: space-between. However, it isn't doing anything. Can someone point out what I'm doing wrong please?
@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
The height of a block element defaults to the height of the block's content, unless you define a specific height. And flexbox justify-content defines how the browser distributes space between and around flex items. So it won't have any effects with flex-direction:column by default.
In your example nav.flex-container doesn't have any height defined, you can set either a percentage n% (as you already set 100vh on header, the parent element) or vh value to it.
nav.flex-container {
height: 80%; /*your value*/
}
Updated pen - https://codepen.io/anon/pen/LGRqzy
Or, set header to display:flex as well, and add flex:1 (grow) on nav.flex-container.
header {
display: flex;
flex-direction: column;
}
nav.flex-container {
flex: 1;
}
Updated pen - https://codepen.io/anon/pen/WrGPMW
这篇关于为什么辩解内容之间的空间什么也没做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
