http://jsfiddle.net/J8rL7/87/
根据http://caniuse.com/#feat=flexbox
它适用于带有vendor-prefix的IE10.
但事实并非如此！
更新：我刚刚检查了最新的Firefox,它看起来完全坏了.
为什么？
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div class="Box" style="background-color:#ff99cc;height:25%;">1</div>
<div class="Box" style="background-color:#ff33cc;height:50%;">2</div>
<div class="Box" style="background-color:#ff66cc;height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%;background-color:violet">
<div class="Box" style="background-color:orange;height:50%;">Total</div>
<div class="Box" style="background-color:blue;height:50%;">Test</div>
</div>
</div>
</div>
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
div{
text-align:center;
}
.Box
{
display:-webkit-Box;-webkit-Box-pack:center;-webkit-Box-align:center;
display:-ms-Box;-ms-Box-pack:center;-ms-Box-align:center;
display:-moz-Box;-moz-Box-pack:center;-moz-Box-align:center;
}
解决方法
您需要非常仔细地阅读关于caniuse的说明. “部分支持”是指支持两个较旧的草稿中的一个,并且它们没有记录哪个浏览器支持哪个草稿. IE10支持
March 2012 draft,它是唯一知道这样做的人.
http://codepen.io/cimmanon/pen/ApHEy
.Box { display: -webkit-Box; display: -moz-Box; display: -ms-flexBox; display: -webkit-flex; display: flex; -webkit-Box-pack: center; -moz-Box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-Box-align: center; -moz-Box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; /* fix for old FF */ width: 100%; }
