1

Looking at previous questions on the subject, I am given to understand that vendor prefixes are effectively redundant when it comes to flexbox. So how then is it that a fair number of designers I know use flexbox. Since I cannot restructure my project at this stage, how can I get flexbox to be understood by all browsers?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Agni Scribe
  • 252
  • 3
  • 18
  • 1
    They work. Although keep in mind that there was an older version of the syntax - you could find all the information you need at http://caniuse.com/#search=flexbox – Aziz Feb 29 '16 at 12:57
  • 1
    Also, read these articles: [“Old” Flexbox and “New” Flexbox](https://css-tricks.com/old-flexbox-and-new-flexbox/), [Using Flexbox](https://css-tricks.com/using-flexbox/) – Aziz Feb 29 '16 at 12:59

2 Answers2

2

When it comes to vendor prefixes you need to know about browser compatibility.

Some browsers will require prefixes for flexbox to work (such as IE 10 and Safari 8), others don't need prefixes at all (like current Chrome and Firefox).

Some (older) browsers don't support flexbox at all (such as IE 8 and 9), so no amount of prefixes will make a difference.

All flex property definitions on Mozilla Developer Network have a section at the bottom showing browser compatibility. You'll be able to see the level of browser support for each property.

You can also check browser support at caniuse.com.

For a more comprehensive analysis of flexbox browser support see:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

Just make sure you put things in the correct order. For maximum compatibility, try:

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;
Diego
  • 594
  • 2
  • 10
  • 29
Ramzi Dreessen
  • 102
  • 1
  • 9