Flex items evenly spaced but first item aligned left
You can use justify-content: space-between
, but the last content will have also no space on the right.
A good documentation.
.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>
Using auto
for margin-right
items will be "forced" to left.
Instead of using justify-content: space-around
, use auto
margins on the items.
By giving each flex item margin-right: auto
, container space will be distributed evenly between items (like justify-content
), but the first item will remain at the left border 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 flex auto
margins here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?