Menu
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
840
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
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
