1、非固定分配
eg.一块地总150平方分配给三孩子，按照2:1:1分
#老大 { 房子-分配: 2; } = 75平#老二 { 房子-分配: 1; } = 37.5平#老三 { 房子-分配: 1; } = 37.5平如果转换成CSS表示就是：
#first_boy { box-flex: 2; }#second_boy { box-flex: 1; }#three_boy { box-flex: 1; }>box-flex的值为至少为1的整数时起作用。但是，仅仅一个box-flex属性是不足以实现子元素间的空间分配。
>父元素也是需要添加必要的声明的。看代码
>
display:box;的声明其实就是弹性盒子模型的声明，此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。>Flexbox以95.89％的比率在全球浏览器得到了很好的支持。如果你不考虑IE 10及以下的版本。需要附带私有前缀。就是诸如-moz-, -webkit-之类。
CSS实例
现在把上面的例子CSS实例化，看看在web页面上是个如何的表现：
主要CSS代码如下：
-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.test_box {display: -moz-box; //父元素的声明or许可display: -webkit-box;display: box; //弹性盒子模型的声明width: 200px;}.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;border:1px solid #000;}.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;border:1px solid #000;}</style></head><body><div><div class="test_box"><div class="list list_two">1</div><div class="list list_one">2</div><div class="list list_one">3</div></div></div></body></html>
结果如下：
2、部分定值，剩余再分配
固定一部分50平，剩下的再按照1:2
#老大 { 房子-分配: 2; }#老二 { 房子-分配: 1; }#老三 { 房子-分配: 50; }如果转换成CSS表示就是：
#first_boy { box-flex: 2; }#second_boy { box-flex: 1; }#three_boy { width: 50px; }新增CSS样式，完整代码如下
-
.list_three{width:60px;border:1px solid #000;}- HTML代码如下：
<div><div class="test_box"><div class="list list_one">1</div><div class="list list_two">2</div><div class="list list_three">3</div></div></div>
结果
在块2的样式里面加边距，结果就是
3、父标签的属性
box-orient, box-direction, box-align, box-pack, box-lines.