关于box,flebox,flex的兼容性问题测试

关于box,flebox,flex，题主以前也是傻傻的分不清，于是下午查了些资料，资料来说对于盒型布局介绍的较多，然而对于flex版本的来说，并不是很多，也不是很详细（可能个人搜索关键字不对，然而不要在意这些细节），俗话说自己动手丰衣足食嘛，所以就写了几个demo，然后有了一点总结，在这里分享给大家，如果有什么错误的话，可以看我的小尾巴找我的联系方式，留言给我，谢谢。

说起来让未知高度的元素在父级中垂直居中这个难题，一直以来都是用的table来解决的，所以我就试着用css3的属性来解决，找到了flex，查了下资料后，才发下以下几点：

1、display:box;//其实是09年css3还不是很规范的时候推出的属性，所以在游览器中的表现也是有所不用。（安卓4.4版本以下支持）

2、display:flexbox; // 其实是最新版flex的一种过渡的属性，其只有IE10支持，但是由于IE10的更新，其实IE10已经支持了最新版的display:flex;所以我们常看到的网上的一堆的flex的兼容代码其实是不必要加上flexbox。

3、display:flex;//是最新版的flex的属性，IE10,FF,GG，安卓4.4以上，ios7以上的都是支持的（没测到具体的版本，个人感觉没必要）

4、其实还有一个很有趣的现象：如果你的用户群体是非IE内核的话（手机端），其实你完全可以用box来写，具体代码如下：

display:box; 安卓4.4一下的版本和旧点的浏览器（注意最新的FF,GG是不支持这个属性的）

如果想让他们支持的话你可以加这样写：-webkit-display:box; -moz-display:box;加上前缀以后这些最新的浏览器就会向下支持这些属性，是不是很叼的感觉，但是坑爹的IE系列不支持。

5、如果兼容全部的浏览器的话其实这样写即可：

display:box;

/*

display:-webkit-box;

display:-moz-box;

*/

display:flex;

align-items: center;//最新版的垂直居中

box-align:center;//老版本的垂直居中

/*-webkit-box-align:center;

-moz-box-align:center;*/其实个人觉得带有注释符的部分是可以省略的，没办法测试安卓4.4和低版本浏览器，所以先放上去，但是可以得到一点display:flexbox是没必要写的，亲测可用。

最后，谢谢大家的阅读，如果有什么错误或者资料可以M我QQ，请填写好备注（博客园）即可。