Cross Browser support for CSS Flexbox

Question

I have been using the code mentioned below, it works on my Chrome but not on my IE9 and Safari.

I googled for the solution, despite I got various vendor prefixes, those results are baffling me.

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>

Answer 1

To cover all Flexbox implementations, your CSS would look like this:

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

Note, however, that specifying flex-direction: row is not necessary unless you're overriding a previous flex-direction declaration: row is the default direction. Also note that IE10 is the first version of IE to support Flexbox.