css3中 弹性盒模型布局之box-flex

box-flex：也就是让子容器针对父容器的宽高属性依照一定的规则来划分

Eg：

html代码：

<div class="wrap">

<div class="box1">01</div>

<div class="box2">02</div>

<div class="box3">03</div>

</div>

CSS样式：

<style type="text/css">

body,div { background:#fff; margin:0; padding:0;}

.wrap { width:600px; height:200px; color:#fff; margin:20px 0 0 20px; text-align:center; 

display:-moz-box; display:-webkit-box; display:box;   

-moz-box-orient:block-axis; -webkit-box-orient:block-axis; box-orient:block-axis;    

-moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse;    

}

.box1 {background:red;

  -moz-box-flex:3; -webkit-box-flex:3; box-flex:3;    

  -moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1;   

  }

.box2 {background:green;

 -moz-box-flex:1; -webkit-box-flex:1; box-flex:1;

 -moz-box-ordinal-group:3; -webkit-box-ordinal-group:3; box-ordinal-group:3; 

  }

.box3 {background:blue;

 -moz-box-flex:2; -webkit-box-flex:2; box-flex:2;

 -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2; 

   }

</style>

预览效果：

 

解析：

先看父级的元素中中设置的属性

1、box-orient:block-axis;      使得子元素依照块级类型竖向显示。

2、box-direction:reverse;      使得子元素显示顺序与默认相颠倒。

再看子元素中的属性（这个以红色区域且标有01文字的模块为例来做具体介绍）

1、box-flex:3;  子元素按照无级元素设置了占有比例。

从全局来看，一共将低级元素划分成了6份。而红色区域是占了3/6的。即上图中显示所总体高度的1/2。

2、box-ordinal-group:1;   即给每个子元素定义了一个组，则依照组的大小来呈现，先小后大；  依照组中定义的大小，本应该是红色居上、蓝色居中、绿色最下显示，而在父级的元素中中定义了一个子元素的反向呈现方式（box-direction:reverse），即与默认相反。

讲到这里。我想大家都豁然开朗了吧！呵呵，当然也存在疑问。假设想让当中某一模块设置为固定数字。那么其它模块又会按如何的比例来呈现呢？我们能够再看一下以下这个样例（由例1稍做修改）。

静态代码不变、样式由之前的改为：

<style type="text/css">

body,div { background:#fff; margin:0; padding:0;}

.wrap { width:600px; height:200px; color:#fff; margin:20px 0 0 20px; text-align:center; 

display:-moz-box; display:-webkit-box; display:box;   

-moz-box-orient:block-axis; -webkit-box-orient:block-axis; box-orient:block-axis;    

-moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse;    

}

.box1 {background:red;

  -moz-box-flex:3; -webkit-box-flex:3; box-flex:3;    

  -moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1;   

  }

.box2 {background:green;

   height:100px; 

 -moz-box-ordinal-group:3; -webkit-box-ordinal-group:3; box-ordinal-group:3; 

  }

.box3 {background:blue;

 -moz-box-flex:2; -webkit-box-flex:2; box-flex:2;

 -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2; 

   }

</style>

预览效果：

 

这个时候。绿色模块的高度是固定的，设置为100，占领了父元素的一半。

从预览图能够看出，无论哪个模块。一旦设置了固定的宽或者是高，则优先级会比較高。而其它模块呢，还是依照之前的那种思路。用对应比例来显示。要注意的是，这时候的总宽或者高就变了。应