display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2};
.panel3{box-flex : 3};
horizontal //水平 vertical // 垂直 inline-axis //也算是水平 block-axis//也算是垂直，跟垂直没有什么区别 inherit // 水平，垂直
p.s : 当设置了水平(horizontal)或者 inline-axis 的话，如果父容器设置了高度，子容器的高度会跟父容器保持一致（即时子容器设置了高度也无效）。如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。同理，如果设置了垂直(vertical) or block-axis 父容器设置了宽度的话，子容器设置宽度会无效。如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度
start // 理解为valign = top 以顶部对齐, 、 end //理解为 valign = bottom 以底部对齐 center // 理解为 valign = center 以居中对齐 baseline //理解为以某一个元素的基准线进行对齐， stretch(默认值) //以最大的一块的高度或者宽度拉伸,以哪个方位进行拉伸取决于你是水平对齐还是垂直对齐,如果子容器没有定义高度则以父容器的宽度或者高度拉伸
p.s
当父容器有宽度高度的时候
1、如果是水平切分，设置box-align的值不等于stretch(拉伸)的时候，内容的子容器的高度不再是父容器的高度，而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候，子容器的高度变成自身的高度
2、如果是水平切分，设置box-align的值不等于stretch(拉伸)的时候，内容的子容器的高度不再是父容器的高度，而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候，子容器的高度变成自身的高度
start 代表向左对齐 end 代表向右对齐，类似与float:right center 居中对齐， 类似div.设定了宽度，然后margin: 0 auto justify : 就是自适应撑开到父容器的宽度
.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2;width:200px};
.panel3{box-flex : 3};