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

Issue #15947692 • Assigned to Francois R.

Details

Author
Charles P.
Created
Feb 14, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16299
Reports
Reported by 19 people

Sign in to watch or report this issue.

Steps to reproduce

https://codepen.io/team/css-tricks/pen/zzJMGJ

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.

Attachments

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

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

    Sign in