Jérôme Pott
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/
