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?

Tags:

Css

Flexbox

Recent Posts