css - IE flexible box model not working

Question

Im trying to implement the flexible box model into my website, and while its working for the -webkit-browsers like chrome and safari, other browsers like mozilla and opera, I jus cant seem to get it working in Internet Explorer, no matter what I do. Heres a short snippet of my Css stylesheet file containing my .holder class which houses everything, and my #new_div id which is a child of .holder and houses my main section for posts and sidebar.

.holder
{
    width:100%;
    margin:auto;
    display:-webkit-box;
    display:-o-box;
    display:-ms-box;
    display:-box;
    display:-pie;
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -o-box-orient:vertical;
    -ms-box-orient:vertical;
    -box-orient:vertical;
    -pie-box-orient:vertical;
    -moz-box-flex:1;    /* Firefox, seamonkey etc */
    -o-box-flex:1;      /* Opera */
    -ms-box-flex:1;     /* MSIE */
    -box-flex:1;         /* Any that support full implementation */
    -pie-box-flex:1;
    -webkit-box-flex:1;
    -webkit-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center;
    -pie-box-pack:center;
    -box-pack:center; 
    text-align:center;
    behavior: url(../../Content/pie/PIE.htc);
}

.holder #new_div
{
    width:940px;
}
.holder div
{
    -webkit-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center;
    -box-pack:center; 
    -pie-box-pack:center;
    behavior: url(../../Content/pie/PIE.htc);
}
#new_div
{
    margin:auto;
    display:-webkit-box;
    display:-moz-box;
    display:-o-box;
    display:-ms-box;
    display:-box;
    display:-pie-box;
    text-align:left;
    -webkit-box-flex:1;
    -moz-box-flex:1;    /* Firefox, seamonkey etc */
    -o-box-flex:1;      /* Opera */
    -ms-box-flex:1;     /* MSIE */ 
    -box-flex:1; 
    -pie-box:1;     
    -webkit-box-pack:center;
    -box-pack:center;
    -moz-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center; 
    -pie-box-pack:center;
    background-color:#25282D;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -o-box-orient:horizontal;
    -ms-box-orient:horizontal;
    -box-orient:horizontal;
    -pie-box-orient:horizontal;
    min-width:940px; 
    padding:20px;
    behavior: url(../../Content/pie/PIE.htc);
}

There you can see I have the -ms-box-.. names defined along side the other definitions, however it still doesnt seem to register. I've tried using the CSS3Pie library out of desperation though that didnt work, tryed installing the Chrome plugin for IE though that failed also and I'm jus out of ideas on what to do guys. Maybe there could be a syntax problem with the css I already have written thats throwhing it off, but as I said it works fine in the others browsers. Any suggestions or tips?

Answer 1

IE doesn't use the deprecated 2009 Flexbox properties, it uses the ones from the deprecated March 2012 draft. Opera supports the Flexbox standard properties without prefixes and the 2009 properties under the -webkit- prefix.

.holder {
  width: 100%;
  margin: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

.holder #new_div {
  width: 940px;
}

.holder div {
  /* justify-content does nothing here since this element isn't a flex container */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#new_div {
  margin: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-align: left;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* this shouldn't be necessary, as the default direction is `row` */
  -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;
  min-width: 940px;
  padding: 20px;
}

Also worth noting, this requires IE10+