为什么 justify-content space- between 什么都不做?
[英] Why is justify-content space-between not doing anything?
本文介绍了为什么 justify-content space- between 什么都不做?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 justify-content: space-between 将 top-nav 和 bot-nav 分区垂直分开>.但是，它没有做任何事情.有人可以指出我做错了什么吗?
@import url(https://fonts.googleapis.com/css?family=Rock+Salt);html {font-family: 'Rock Salt'，草书；}.flex 容器 {显示:弹性；}标题{宽度:300px；高度:100vh；位置:固定；背景颜色:蓝色；}nav.flex-container {对齐项目:居中；弹性方向:列；对齐内容:间隔；}ul{填充:0；边距:0；列表样式类型:无；}#logo-容器{背景颜色:红色；宽度:100%；}#标识 {保证金:自动；填充:10px 0;}
<div id="根容器"><标题><div id="logo-container" class="flex-container"><h2 id="logo">名称在这里</h2>
<nav class="flex-container"><div class="top-nav"><ul><li>这是一个列表项</li><li>这是一个列表项</li>
<div class="bot-nav"><ul><li>这是一个列表项</li><li>这是一个列表项</li>
</nav></标题>
https://codepen.io/anon/pen/rxMPMN
解决方案
块元素的高度默认为块内容的高度，除非你定义了一个特定的高度.flexbox justify-content 定义了浏览器如何在 flex 项目之间和周围分配空间.所以默认情况下它不会对 flex-direction:column 产生任何影响.
在您的示例中 nav.flex-container 没有定义任何高度，您可以设置百分比 n% (因为您已经设置了 100vh 在 header，父元素)或 vh 值.
nav.flex-container {高度:80%；/*你的价值*/}
更新的笔 - https://codepen.io/anon/pen/LGRqzy
或者，也将 header 设置为 display:flex，并在 nav.flex 上添加 flex:1 (grow)-容器.
header {显示:弹性；弹性方向:列；}nav.flex-container {弹性: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
这篇关于为什么 justify-content space- between 什么都不做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
