理解display：box 和 display：flex

参考学习：http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/（box-flex属性和谐版
& 不和谐版）

http://www.cnblogs.com/qieguo/p/5421252.html
（css 的各种布局方式）

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
（flex布局教程【厉害】）

css  分 display position float 布局

关于display:box 和 display:flex 布局区别

display:box

是2009年的语法版本，使用时需要加上浏览器的前缀，不过现在已经过时了。

display:flex

是2012年最新修正的语法版本，浏览器支持较好，也将成为以后标准的语法。

中间2011年也提出了一个奇葩的语法版本

display:flexbox

，非官方的，当时主要是为IE浏览器使用。

较完整的兼容性代码：

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

兼容情况如下：

display:box

浏览器支持：

IE	Firefox	Chrome	Safari	Opera
不支持	2.0-40.0 （-moz-）	4.0-45.0 （-webkit-）	6.0-8.0 （-webkit-）	15.0-29.0 （-webkit-）

display:flex

浏览器支持：

IE	Firefox	Chrome	Safari	Opera
11.0+	22.0+	21.0+（-webkit-） 29.0+	6.1+（-webkit-） 9.0+	15.0+（-webkit-） 17.0+

引用知乎上的一个答案：

链接：https://www.zhihu.com/question/22991944/answer/93258756

背景：今天用flex柔式布局做手机页面，在google浏览器下模拟各主流设备完美显示，心情美美的。

为了保证兼容性，我用同事古董级的魅族手机里系统自带的M牌浏览器做最终测试，结果果然有问题，什么情况呢。

手机码字上不了代码截图，我手写出来你看下

father {display:flex; display:-webkit-flex; flex-flow:row; -webkit-flex-flow:row; justify-content:space-around; }

child { box-flex:1.0; -webkit-box-flex:1.0; }

因为是纯手机页面，只考虑webkit内核，明明模拟测试的没问题啊！为什么在古董机上就不行呢？

后来发现，只要在父容器原代码中加入 display:-webkit-box; 就可以完美解决。

如果要说区别，display：box； 是老规范，要兼顾古董机子就加上它。

flexbox flex 是新规范，老机子不支持的。