Support for flexbox justify-content: space-evenly?

I’m relatively new to Bootstrap, so forgive me if I’ve missed something here:

The missing feature

According to the docs, columns can be horizontally aligned using classes that correspond to various flexbox justify-content values:

• .justify-content-start
• .justify-content-center
• .justify-content-end
• .justify-content-around
• .justify-content-between

and according to CSS-Tricks’ Complete Guide to Flexbox, there is a sixth flexbox justify-content value:

• justify-content: space-evenly

This alignment option does not appear to be exposed through a Bootstrap CSS class.

Why I think it’s missing

In my browser (Firefox 57), while viewing the section of the Bootstrap docs linked above, I used the Dev Tools to manually modify the class of one of the elements in the demo area:

The resulting layout was identical to what it would have been without any .justify-content-* class at all.

The space-evenly value is, however, supported in my browser: it works when I apply the CSS property-value pair manually:

Question

Both CSS and Flexbox have been around for the better part of a decade, so I can only assume this was a deliberate omission. Is there a reason space-evenly is not supported?

(Is it related to browser compatibility issues? According to MDN, space-evenly is still unsupported in both Edge and IE, as well as most mobile browsers, but then again, so are start and end.)

[jonjohnjohnson]

I know this issue has been closed, but from what I understand, though space-evenly may not be natively supported for older browsers, like ie10, you can create the same layout effect by using pseudo elements at the beginning and end of the flex container. An example of this is shown in the following link.

https://stackoverflow.com/questions/45612955/space-evenly-justify-content-not-working-on-chrome-mobile/45620233#45620233

Just posting this to inform, if the trade off of hijacking pseudo elements on the flex container would be worth offering the justify-content-evenly modifier class?

[andresgalante]

Hi @rlue thanks for been so clear on your proposal ❤️

Bootstrap 4 supports IE10+ that’s why we don’t include space-evenly.

We don’t include start or end either, justify-content-start refers to flex-start and justify-content-end refers to flex-end.