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(继承父元素)
其他属性就不一一列举,推荐一个链接: