浅谈 css3 box盒子模型以及box-flex的使用

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

 

一、使用以及介绍：

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

  i. display : box必须用在对应的父窗口，比如div.parent>div.panel*3 这种格局， parent 必须先先定义此属性

  ii. .panel的元素定义box-flex，来实现按比例切分。如下图：就是将三个div水平切分成6份    

.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 // 水平，垂直

p.s : 当设置了水平(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(默认值)  //以最大的一块的高度或者宽度拉伸,以哪个方位进行拉伸取决于你是水平对齐还是垂直对齐,如果子容器没有定义高度则以父容器的宽度或者高度拉伸

p.s
当父容器有宽度高度的时候
     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

.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 在进行比例切分,这个也符合我们的要求。