Flexbox justify-content space-evenly does not behave as expected

Issue #15947692 • Assigned to Francois R.


Charles P.
Feb 14, 2018
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 23 people

Sign in to watch or report this issue.

Steps to reproduce


See the codepen, on most modern browsers the space-evenly section uses the available width to space the items evenly across the width. In IE it left-justifies all the items.


0 attachments

    Comments and activity

    • Thanks for reporting the issue! It indeed looks like that we added support for SpaceEvenly for CSS Grid but forgot to also add support for it in Flexbox. 

    • Microsoft Edge Team

      Changed Assigned To to “Francois R.”

    • Lol so true… What to do? Any polyfills?

    • From what I can tell, Edge seems to think it implements "space-evenly". I’ve used space-around followed by space-evenly so that IE would fall back to space-around (since it doesn’t understand “space-around”). This gets things looking decent in IE, but then Edge tries to use “space-evenly” – even though it’d be better off falling back to “space-around” (which it does understand). Bummer!

    • A possible workaround for this is to set a fallback specifically for Edge like so:

      .myclass {
          justify-content: space-evenly;
      @supports (-ms-accelerator: true) { /* Edge only */
          .myclass {
              justify-content: space-around;
              /* you can also add some other adjustments to size, margins etc to get the same positioning */
    • Any updates on this?

    • I have an update on this: @supports (-ms-accelerator: true) doesn’t work anymore! I’m using @supports (-ms-flow-from: thingy) to work around this issue.

    • Still broken over 1 year later.

      No wonder no-one uses MS’s browsers, they can’t be arsed to maintain the bare minimum of modern html/css compatability.

    • Any updates on this?

    You need to sign in to your Microsoft account to add a comment.

    Sign in