CSS3新属性box-flexd弹性盒模型

1、介绍:box-flex是css3属性，需考虑兼容性问题。(大部分浏览器已经实现了无前缀版本)

#element{
box-flex:1.0;   /*必须是整数，占父元素几等分的意思*/
-moz-box-flex:1.0;   /* Firefox的兼容性*/
-webkit-box-flex:1.0; /*Safari和Chrome的兼容性*/
-o-box-flex:1.0; /*opera的兼容性*/
}

2、实现步骤:

2-1:给父元素声明是弹性盒模型

#father{
display:box; /*display:flex也行，具体区别请看：http://www.zhihu.com/question/22991944*/
}

2-2:给子元素分蛋糕:

#child1{
box-flex:1.0; (这没有考虑兼容性了)
}
#child2{
ox-flex:2.0;(child2比child1年龄大，多分)
}

如此就将父亲带回来的cake分成了三等份，二师兄吃得多分了两等份。

2-3：cake三等份有多种分发，这个得看父元素怎么来决定（给father设置属性）。

属性一：box-orient(规定子元素水平还是垂直排列),如同分cake是横着下刀还是竖着下刀。

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

沿水平线排列(默认值)|垂直|沿行内轴|沿块内轴|继承父元素

属性二：box-direction(规定子元素从左至右还是从右至左),如同cake切好谁先拿，年小的先拿还是年长得先拿=。=！

box-direction: normal|reverse|inherit;
normal(默认值,horizontal:从左至右,vertical:从上往下)
reverse(反序排列)
inherit(继承父元素)

其他属性就不一一列举，推荐一个链接:

点击链接