Flex items are evenly spaced, but the first item is aligned to the left
Flexbox justify-content: space-around
makes my list items horizontally evenly spaced. Is there a way to have exactly the same thing with the only difference that the first item on the left has no place on the left? (ie the list "starts" at the left edge of the container)
You can use justify-content: space-between
, but the latter content also has no place on the right.
Good documentation .
Use justify-content: space-around
margins auto
for elements instead .
By giving each element some flexibility margin-right: auto
, the container space will be evenly distributed among the elements (for example justify-content
), but the first element will remain at the edge of the left edge.
flex-container[one] {
display: flex;
justify-content: space-around;
border: 1px dashed green;
}
flex-container[one]>flex-item {
background-color: lightgreen;
}
flex-container[two] {
display: flex;
border: 1px dashed red;
}
flex-container[two]>flex-item {
margin-right: auto;
background-color: orangered;
}
flex-item {
width: 50px;
height: 50px;
}
<code>justify-content: space-around</code>
<flex-container one>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
<br>
<code>margin-right: auto</code>
<flex-container two>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
jsFiddle demo
Learn more about the boundaries of flex auto
here: The CSS Flexbox, why not "justifiable elements"? and the "justify-self" property?
.container {
display: flex;
justify-content: space-evenly;
}
.container .item {
margin: 0 auto 0 0;
}
<div class="container">
<div class="item">Apple</div>
<div class="item">Orange</div>
<div class="item">Pineapple</div>
</div>
Usage auto
for margin-right
items will be "forced" on the left.
Use justify-content: space-between
instead space-around
to get what you are trying to achieve here.
Refer to the code:
ul {
display: flex;
padding-left: 0;
}
li {
justify-content: space-between;
display: flex;
width: 25%;
}
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Pineapple</li>
</ul>