Flexbox space-evenly value

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 */
  }
}

Sources:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15947692/
https://caniuse.com/#search=space-evenly
https://cssreference.io/property/justify-content/

Comments

[deji adesoga]

I think this Website contains almost, if not all the values of css flex box. It's also a practical way of viewing the features in real time.