Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issues with IE10 and flexbox -- March 2012 draft not working?

I'm trying to get my flexbox layout to be compatible with IE10, which to my knowledge uses the March 2012 draft of flexboxes. I've tried every freaking syntax and every variation thereof, but to no avail. The IE10 I have installed in Parallels (I'm on a Mac) is version 10.0.9200.16660, which should make it use the IE10 flexbox style yea?

Here's my code:

.uberflex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-pack: center;
    -ms-flex-wrap: wrap;
}

I've tried what seems like every varition of these terms with "-ms-" prefix and without the "-ms-" prefix (what they use in IE11) but to no avail. The only property of the class my IE console is telling me exists is the "display: -ms-flexbox" bit. Am I being very, very slow or have I been using the wrong draft for IE10?? Was there an update to IE10 which makes flexboxes not work or something?

Any information would be immensely helpful, as I've been able to find very little on the subject. Thank you! :-)

like image 395
shan Avatar asked Nov 12 '22 22:11

shan


1 Answers

This is a bit of a guess, but try switching the order to

.uberflex {

    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-pack: center;
    -ms-flex-wrap: wrap;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
like image 187
rjfrizz Avatar answered Nov 14 '22 22:11

rjfrizz