标签：style http color io strong 文件 2014 art
| start |
对于正常方向的框，首个子元素的左边缘吸附在盒子的左边框显示
对于相反方向的框，最后子元素的右边缘吸附在盒子的右边框显示
|
| end |
对于正常方向的框，最后子元素的右边缘吸附在盒子的右边框显示
对于相反方向的框，首个子元素的左边缘吸附在盒子的左边框显示
|
| center | 均等分割剩余空间，一半在首个子元素之前，一半在最后子元素之后 |
| justify | 首尾子元素分别吸附在左右边框上，中间的子元素分割多余空间 |
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
|
| normal | 以默认方式显示子元素 |
| reverse | 以相反方向显示子元素 |
| inherit | 从父容器继承box-direction |
| 以水平方向显示子元素 box-orient:horizontal; | ||||||||
|
| 以垂直方向显示子元素 box-orient: vertical; | ||||||||
|
| value | 元素的可伸缩值，柔性是相对，例如 box-flex:2.0 的子元素伸缩尺寸两倍于 box-flex:1.0的子元素 |
| 对 sidebar 应用样式 |
.sidebar{/*给侧边栏添加样式*/
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
}
.article{/*给主体内容添加样式*/
}
|
 |
从显示效果来看， 这正好证明了， 设置了box-flex的元素是有弹性的，
且只要盒子内对应显示方向上有剩余空间， 可伸缩元素就会扩展来填充这些空间。
|
| 对sidebar和middle应用样式 |
.sidebar{/*给侧边栏添加样式*/
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
}
|
 |
从显示效果可以看出，当 .middle 样式设置了box-flex:2.0时，
应用了 .middle 样式的元素也变成了弹性元素，且伸缩尺寸是
box-flex:1.0的两倍。
|
| 对sidebar,middle和article应用样式 |
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex: 1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:3.0;
-moz-box-flex:3.0;
box-flex:3.0;
}
|
 |
这里大家得注意一下，大家可能会认为，.article应该占1/2的空间的，
怎么看.sidebar和.middle加起来都比.article大的啊
其实这里分配的原则是， 剩余空间按照对应比率来分配。
对sidebar来说，伸缩的空间 = 总剩余空间 *(1.0/6.0)；
对middle来说，伸缩的空间 = 总剩余空间*(2.0/6.0) ;
对article来说，伸缩的空间 = 总剩余空间 * (3.0/6.0);
|
box-flex-group 作用： 一组设置了box-flex-group元素当中，值最小的，占用全部剩余空间；值最小且相等，则平均分配剩余空间。
|
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
-webkit-box-flex-group:1;
-moz-box-flex-group:1;
box-flex-group:1;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-flex-group:2;
-moz-box-flex-group:2;
box-flex-group:2;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-flex-group:1;
-moz-box-flex-group:1;
box-flex-group:1;
}
|
 |
大家从效果图应该可以看出， 如果box-flex-group的值较大，则它只分配实际空间，
剩余空间分配给最小的一组 按比率分配。
这句话到底啥意思呢？
我们从代码中可以看到：sidebar的box-flex-group为1，article的box-flex-group也为1，
所以 sidebar和article分配剩余的空间。 但是article的box-flex两倍于sidebar的box-flex，
所以剩余空间，article伸缩的空间 应该是 sidebar伸缩空间的两倍。
|
|
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
|
|
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:4;
-moz-box-ordinal-group:4;
box-ordinal-group:4;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
|
CSS3中的弹性流体盒模型技术详解(二),布布扣,bubuko.com
标签：style http color io strong 文件 2014 art
原文地址：http://www.cnblogs.com/itdriver/p/3893525.html
