语法：

Box-flex：<number>

其中number取值：使用浮点数指定对象所分配其父元素剩余空间的比例。
设置或检索伸缩盒对象的子元素如何分配其剩余空间。(伸缩盒最老版本)

HTML代码：

<ul id="Box">
    li>a</>b>c>
ul>

css代码：

#Box{
    display:-webkit-Box;-moz-Box;-ms-Box
    display:Box;
    width:240px;
    height:100px;
    margin:0;
    padding:10px;
    list-style:none;
    color:#fff;
}
#Box li:nth-child(1){
    -webkit-Box-flex:1;
    -moz-Box-flex:
    -ms-Box-flex:
    Box-flex:
    background:#000;
}
#Box li:nth-child(2){red;
}
#Box li:nth-child(3){2; grey;
}

得到的结果如图所示:

注：其实上面的css代码中-ms-Box-flex与Box-flex可以省略，为什么这么说呢，IE6-IE11的浏览器不支持Box-flex，其它内核的浏览器都需要加上前缀如-webkit-，-moz-浏览器才解析这个属性。这儿写上是为告诉大家，为了让css3属性兼容，一般都这么写完整而已。下面会说一下浏览器的兼容。

误区：注意Box-flex只是动态分配父元素的剩余空间，而不是整个父元素的空间。如上例，父元素#Box的宽度为240px，如果你认为a,b,c的宽度分别为60,60,120那么就错了，因为Box-flex只是分配父元素的剩余空间而已，所以a,c所分到的应该是除内容外所剩余下来的宽度

为了清晰所谓的剩余空间分配，对上例稍作修改，HTML Code不变

css代码：

#Box li{50px;7px;
} grey;
}

结果如图所示：

从上面的代码，我们可以知道a,c的宽度分别为50+7*2=64px，三者加起来即192px，所以剩下的240-192=48px才是父元素的剩余空间，于是a,c按照设定的1:1:2来分配这48px，a分得12px，b分得12px，c分得24px，所以最终a=64+12=76px，b=64+12=76px，c=64+24=88px

由上面的代码引入了一个思考，如果我没有给li设置宽度，并且当子元素的内容过多，会出现什么问题，那就是设置的Box-flex会被撑开，根据上面来写个例子，如下：
css代码：

 grey;
}

HTML代码：

>这个内容过多怎么办？有问题没有？>

结果如图所示：

那要怎么解决呢？
就是给li添加一个width:1%,代码如下：

#Box li{1%;7px;
}

或者width:1px也是可以的。结果如图所示:

兼容性如图所示：

参考地址：《css3参考手册：box-flex》

最后说明下：

1. display:Box,是2009的flexBox版本
2. display:flexBox,或者函数flex()，是2011年发布的
3. display:flex,是目前正在使用的2012年发布的标准