flex-direction and flex not working for all browsers

Question

I've following CSS class and I want to make it work for all below browsers:

1. IE 9 and above
2. Chrome
3. Mozilla Firefox

4. Safari

   .itemContainer {
       display: flex;
       flex-direction: row;
   }
   .wrap-vertical {
          flex: 1;
          margin-top: 15px;
   }
   

Currently it is only working on Chrome and FF.

And I tried -ms- and -webkit- for IE and Safari but it's not working.

Please suggest changes to accommodate this.

Answer 1

IE 9 does not support flexbox.

IE 10 supports an old flexbox specification and requires vendor prefixes.

Although Safari 9 supports the current flexbox spec without prefixes, older versions require prefixes.

For a complete review of flexbox browser support, see this page: http://caniuse.com/#search=flex

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.