37.CSS3弹性伸缩布局【上】
第二十九章 CSS3弹性伸缩布局【上】
一、布局简介
Flexbox布局，即弹性伸缩布局模型（Flexible Box）,他能更有效的实现布局，但这个布局还处于W3C的草案阶段，并且分旧版本，新版本，混合过渡阶段三种不同的编码。
IE Firefox Chrome Opera Safari
支持需带前缀 无 4～25 4～31 15～18 5.17+
支持不带前缀 无 无 无 无 无
//以上数据来自CSS手册上的。
首先，第一步先创建一段内容，分成三个区域。
//HTML部分
<div>
<p>。。。</p>
<p>。。。</p>
<p>。。。</p>
</div>
//css部分
p{
width: 150px;
border: 1px solid gray;
background-color: silver;
margin: 5px;
padding: 5px;
}
二、旧版本
属性和属性值为display:box,这2009年7月拟定的草案。
首先，要将几个需要布局模块的父元素设置一下容器属性display。
（1）box : 将容器盒模型作为块级弹性伸缩盒显示（旧版本）
（2）inline-box: 将容器盒模型作为内联级弹性伸缩盒显示（旧版本）
块级占用整行的，类似<div>元素，而内联级不占用整行，类似<span>元素。但我们设置了整个盒子，他们都不占用，保持一致。
//设置弹性，以火狐为例
例、div{
display:-moz-box; //弹性布局
}
1、box-orient属性 主要实现盒子内部元素的波动方向
//设置垂直流动
div{
-webkit-box-orient:vertical;
}
(1)horizontal 伸缩项目从左到右水平排列
(2)vertical 伸缩项目从上到下垂直排列
(3)inline-axis 伸缩项目沿着内联轴排列显示
(4)block-axis 伸缩项目沿着块轴排列显示
2、box-direction 设置伸缩容易中的流动顺序
//设置逆序
div{
-moz-box-direction:reverse;
}
(1)normal 默认值，正常顺序
(2)reverse 逆序
3、box-pack 用于伸缩项目的分布方式
//分布方式已结束位置靠齐
div{
-moz-box-pack:end;
}
(1)start 伸缩项目以起始点靠齐
(2)end 伸缩项目以结束点靠齐
(3)center 伸缩项目以中心点靠齐
(4)justify 伸缩项目平局分布，-webkit-支持，-moz-不支持
4、box-align 用来处理伸缩容器的额外时间
//居中对齐，清理上下额外空间
div{
-moz-box-align:center;
}
(1)start 伸缩项目以顶部为基准，清理下部额外空间
(2)end 伸缩项目以底部为基准，清理上部额外空间
(3)center 伸缩项目以中部为基准，平均清理上下部恩爱空间
(4)baseline 伸缩项目以基线为基准，清理额外空间
(5)stretch 伸缩项目填充整个容器，默认
5、box-flex 可以使用浮点数分配伸缩项目的比例
//设置每个伸缩项目占用比例
p:nth-child(1){
-moz-box-flex：1； //相当于占了20%
}
p:nth-child(2){
-moz-box-flex：3； //相当于占了60%
}
p:nth-child(3){
-moz-box-flex：1； //相当于占了20%
}
6、box-ordinal-group 可以设置伸缩项目的显示位置
//将第一个位置的元素，跳转到第二个位置，第三个不变
p:nth-child(1){
-moz-box-flex：1；
-moz-box-ordinal-group：2；
}
p:nth-child(2){
-moz-box-flex：3；
-moz-box-ordinal-group：1；
}
p:nth-child(3){
-moz-box-flex：1；
-moz-box-ordinal-group：3；
}
