Flexbox space-evenly value

#css #flexbox

Using the `space-evenly` value with Flexbox

You have certainly already used the space-around and space-evenly values of the Flexbox properties justify-content and align-items.

But did you know that you have one extra option?

Meet thespace-evenly value. This "new" value is similar to space-around but provides equal instead of half-sized space on the edges.

space-around

space-evenly

Microsoft Edge

In Microsoft Edge, the space-evenly value is currently only supported in CSS grid. But here is a possible workaround with a fallback to the space-around value:

.space-evenly {
  justify-content: space-evenly;
}

@supports (-ms-accelerator: true) {
  /* Edge only */

  .space-evenly {
    justify-content: space-around;
    /* you can also add some other adjustments to size, margins etc to get the same positioning */
  }
}