Flex items evenly spaced but first item aligned left

Question

Flexbox's 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 space on its left? (that is, the list "starts" from the left edge of the container)

Answer 1

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?

Answer 2

You can use justify-content: space-between, but the last content will have also no space on the right.

A good documentation.