前两天同事进行收集app的二次开发时让我去调样式第一次碰到：display:-webkit-box这样一个css3的盒模型展现方式，打算整理一篇文章的时候搜索到了display:flex这个属性。很混淆的感觉赶紧搜索发现了一丝的回答他们之间的区别：
display:flex和display:box有什么区别？
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
所以兼容性的代码，大致如下
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+ */
flex是一个可伸缩性的容器，一种新的布局方式。
首先我们需要给这个容器一个布局样式的定义，相当于这块领地就划分给了一个财主，display:flex;但是财主不想东一块西一块的像切蛋糕一样把自己的地分得乱七八糟得，所以要么就横向的分要么就竖向的分，作为地主他就需要发话了，flex-flow:row---横向，flex-flow---column竖向；
CSS：
.flex-container{display: -webkit-flex;display: -ms-flexbox;display: flex;width: 500px;height: 500px;border:1px solid red;-webkit-flex-flow:row;-ms-flex-flow:row;flex-flow:row;} .main{width: 200px;background: yellow;} .flex-item{-webkit-flex:1;-ms-flex:1;flex:1;background: red} .flex-item2{-webkit-flex:1;-ms-flex:1;flex:1;background: blue}
HTML：
<div class="flex-container"> <div class="flex-item">flex-item-1</div> <div class="main"></div> <div class="flex-item2">flex-item-2</div> </div>
之前感觉对display：-webkit-box了解很清楚了，这下知道原来这是旧版的flex表现形式，然后发现网上好多资料都是关于box的，而flex相对较少，查了半天垂直居中的属性，头都看晕了……还是没有box下flex-align:center来得简便。确实不想看了这个属性了这会儿……回头再补