display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

一、使用以及介绍：

1、要实现水平或者垂直切分，必须先满足以下要求

display : box必须用在对应的父窗口，比如div.parent>div.panel*3 这种格局， parent 必须先先定义此属性切分。如下图：就是将三个div水平切分成6份

1
2
3
4
.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2};
.panel3{box-flex : 3};

上面罗列的是一个简单的例子，在这个基础上我们如果想垂直布局呢，理论上按我们现在的布局去理解的话就是div.panel1+div.panel2+div.panel3 这种方式也可以，但我们今天考虑到box这个，所以下面用box来实现这个

2、垂直布局的话涉及到另外一个属性：box-orient(父元素上) :  这个属性有以下几个值

horizontal //水平

vertical // 垂直

inline-axis //也算是水平

block-axis//也算是垂直，跟垂直没有什么区别

inherit // 水平，垂直

PS : 当设置了水平(horizontal)或者 inline-axis 的话，如果父容器设置了高度，子容器的高度会跟父容器保持一致（即时子容器设置了高度也无效）。如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。同理，如果设置了垂直(vertical) or block-axis 父容器设置了宽度的话，子容器设置宽度会无效。如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度现在水平排版垂直排版都没有问题了，但是我有时候想实现凹凸的水平布局（如：中间突出a，两边登高b,c）或者凹凸垂直布局，这种的话，那怎么弄呢？需要这样子的话，当然就不能用上面所说的box-orient啦，这样子的话盒子里面的宽高都可以不同那我们能否实现bc模块与a模块垂直对齐，水平对齐呢？

3、那我们就可以用到这个属性：box-align（用在父元素上）： 其有以下属性值
start // 理解为valign = top 以顶部对齐,

end //理解为 valign = bottom 以底部对齐

center // 理解为 valign = center 以居中对齐

baseline //理解为以某一个元素的基准线进行对齐，

stretch(默认值)

//以最大的一块的高度或者宽度拉伸,以哪个方位进行拉伸取决于你是水平对齐还是垂直对齐,如果子容器没有定义高度则以父容器的宽度或者高度拉伸PS

当父容器有宽度高度的时候
1、如果是水平切分，设置box-align的值不等于stretch(拉伸)的时候，内容的子容器的高度不再是父容器的高度，而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候，子容器的高度变成自身的高度

2、如果是水平切分，设置box-align的值不等于stretch(拉伸)的时候，内容的子容器的高度不再是父容器的高度，而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候，子容器的高度变成自身的高度

4、box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示，此参数要生效的话前提条件是： 子容器的总长度<父容器的宽度，这个设置才能起效（自己写的demo出来的结果）

start 代表向左对齐

end 代表向右对齐，类似与float:right

center 居中对齐， 类似div.设定了宽度，然后margin: 0 auto

justify : 就是自适应撑开到父容器的宽度

二、常见问题总结

1、要实现某一块宽度定死，那这个布局是怎么布的呢，结果又是什么，如下demo

1
2
3
4
.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2;width:200px};
.panel3{box-flex : 3};

这样子写的话（既有比例区分，又有精确的宽度的话，比例无效） 这时候中间这块永远都是200px，两边的两块根据父容器宽度-200px 在进行比例切分,这个也符合我们的要求。