justify-content: space-between with equal space between first and last items also [duplicate]

Answer 1

You can avoid the use of pseudos using margins to position the elements.

The first element is a special case, and needs a margin-left; all the others have only margin-right.

But this solution won't work with wrapping enabled. (There is no way to target the first element of the second and following rows)

.flex {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.flex > div {
  background: lightblue;
  height: 100px; 
  width: 100px;
  margin-right: auto;
}

.flex > div:first-child {
  margin-left: auto;
}