Equal space between flex items

Solution 1:

There are at least two methods for equal space between all items, including the first and last items. One method, however, doesn't yet have full browser support.

pseudo-elements

Note this section from Firefox documentation:

In-flow ::after and ::before pseudo-elements are now flex items.

In fact, all major browsers consider pseudo-elements on a flex container to be flex items.

Knowing that, add ::before and ::after to your container.

With justify-content: space-between and zero-width pseudo-elements, the visible flex items will appear evenly spaced.

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

space-evenly

The CSS Box Alignment Module, which is the W3C's unfinished proposal to establish a common set of alignment properties for use across all box models, provides the space-evenly value for use with the justify-content and align-content properties.

4.3. Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords

space-evenly

The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.

The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

As of this writing, however, it looks like space-evenly only works in Firefox and Chrome.

flex-container {
  display: flex;
  justify-content: space-evenly;
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Also, here's a useful demo from the MDN justify-content page for testing space-evenly and other values in your browser. https://jsfiddle.net/gkrsr86n/

Solution 2:

You can do this by setting the padding of the flex container and the margin of the flex items:

.container { 
  display: flex;   
  padding: 0 1%;
}
.item { 
  flex: 1; 
  margin: 0 1%;
}

https://codepen.io/danieldilly/pen/PjgRbe

Solution 3:

This is a perfect use case for flex-basis and justify-content: space-between if you know how many components will be in your row beforehand. Specify a flex-basis percentage on your flex-items that totals less than 100% for all items. The leftover percentages will become margins.

No psuedo elements, child selectors or padding/margin.

div {
  display: flex;
  justify-content: space-between;
  height: 100px;


}
span {
  flex-basis: 32%;
  background: red;
}

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

Solution 4:

In firefox only there is a space-evenly value for justify-content that does this.

It's in the CSS3 working draft

https://www.w3.org/TR/css-align-3/#valdef-align-content-space-evenly

div {
  display: flex;
  height: 100px;
  justify-content: space-evenly;
  border: 1px solid black;
  margin: auto;
}
span {
  width: 20%;
  background: red;
}

<div>
  <span></span>
  <span></span>
  <span></span>
</div>