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.
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/
Top comments (1)
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.