Flexbox not working in IE9, IE11 and Safari

[Plex]

Hi,

I am trying to learn all about flexbox and have gotten a bit. But my problem is that I can’t figure out what I am doing wrong to get it to work in IE9, IE11 and Safari.

If you want to take a look at what it looks like right now, go to My flexbox experiment

In IE9 I don’t get anything to work at all.
In IE11 & Safari everything seems to work except for this code:

article {
  -webkit-box: 3 0 0;
  -moz-box: 3 0 0;
  -ms-flexbox: 3 0 0;
  -webkit-flex: 3 0 0;
  flex: 3 0 0;
}

aside {
  -webkit-box: 1 0 0;
  -moz-box: 1 0 0;
  -ms-flexbox: 1 0 0;
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
}

Anyone got some input on this?

/Plex

[Paulie_D]

Flexbox is not supported by IE9

http://caniuse.com/flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you want us to check your code a Codepen.io example would be more useful.

[Plex]

Thanks for the quick reply Paulie_D.

Ok so let me ask this way instead, how do I get my code to work in IE11 and Safari7?

My code can be looked at here Plex CopdePen

/Plex

[Paulie_D]

It looks like some you may not be using some of the more up to date prefixes.

I couldn’t tell you what they all are but when I use the ‘auto-prefixer’ option in Codepen, it works in Safari (5) but not IE11.

Codepen throws errors when analysing the CSS but that may be a separate issue.

[Plex]

I’m new to CodePen, can you tell me how to use the ‘auto-prefixer’?

Also how do you make CodePen to analyze the CSS?

/Plex

[Plex]

I found how to do it.

Just to be curious, can I see what it does when ‘auto-prefix’-ing the code? Would be nice to see what changed.

/Plex

[Paulie_D]

I’m new to CodePen, can you tell me how to use the ‘auto-prefixer’?

Also how do you make CodePen to analyze the CSS?

Click on the ‘Cog’ in each section to see additional options.

I don’t think you can see the ‘auto-prefixed’ version though.

For more info on AutoPrefixer: https://github.com/ai/autoprefixer

[Plex]

@Paulie_D

FYI I noticed that you can see the ‘auto-prefixed’ version by clicking the eye icon in the upper right corner of the css pane :)

/Plex

[Paulie_D]

Aha…useful to know.

[Author]

Posts