Justify-content: space-between vs. flex-grow to align content
I have a top horizontal navigation in which I am using a flexbox css rule to control the spacing.
I would like the first item in the menu to be aligned to the left, the last item to be aligned to the right, and for the spacing between the rest of the items to be equal.
Is it possible? I thought I justify-content: space-between;
would have achieved this, but I cannot get it to work.
I'll give an example of what I am trying to do on the jsfiddle . I have added this code below as well.
The only way I can do this is to give text-align: center
each of the elements li
, but for the first and the last, what I could give text-align: left
and text-align: right
, but this gives too much distance between the second and second last elements.
.container{
background-color: yellow;
width: 1100px;
}
.container ul#nav {
padding: 0;
display: block;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.container ul#nav li {
list-style: none;
-webkit-flex: 2 1 auto;
-ms-flex: 2 1 auto;
flex: 2 1 auto;
justify-content: space-between;
}
.container ul#nav li {
justify-content: space-between;
}
<div class="container">
<ul id="nav">
<li><a href="#">Apples</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Pears</a></li>
<li><a href="#">Kiwis</a></li>
</ul>
</div>
source to share
This can be done by removing flex: 2 1 auto;
from .container ul#nav li
as follows:
.container{
background-color: yellow;
width: 1100px;
}
.container ul#nav {
padding: 0;
display: block;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.container ul#nav li {
list-style: none;
-webkit-flex: 2 1 auto;
-ms-flex: 2 1 auto;
justify-content: space-between;
}
.container ul#nav li {
justify-content: space-between;
}
<div class="container">
<ul id="nav">
<li><a href="#">Apples</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Pears</a></li>
<li><a href="#">Kiwis</a></li>
</ul>
</div>
source to share
Try the following:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
source to share
The problem is that if at least one item has flex-grow> 0 , automatically any justify-content value will expire and the positive extra space will be distributed among flex-grow items .
In conclusion : "All flex items must have flex-grow: 0; for justify-content to work:.
In your specific case, the problem is with the line: flex: 2 1 auto;
which automatically setsflex-grow: 2;
To fix this just change flex-grow to 0 with a line of codeflex: 0 1 auto;
source to share