css3弹性伸缩布局

css3提供了一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型（Flexible Box），

该布局目前处于W3C的草案阶段，分为旧版本、新版本、新旧混合版本三个版本

一、旧版本的弹性布局方案
旧版本使用的示例如下：

<div>
     <p>……</p>
     <p>……</p>
</div>

下面的属性都是写在div{ }中的。
1、display属性值设为box或inline-box
box               将容器盒模型作为块级弹性伸缩盒显示（旧版本）
inline-box        将容器盒模型作为内联级弹性伸缩盒模型（旧版本）
但是实际上，这两个属性值在页面上的显示效果相同。
box和inline-box属性值需要加前缀，因为目前css3没有标准格式。

 div{
        display:-moz-box;
    display:-webkit-box;      //opear使用-webkit-前缀，IE不支持，
}

2、设置box-orient属性           实现盒子内部元素的流动方向
属性值如下所示：
horizontal                  默认值，伸缩项目从左到右水平排列
vertical                    伸缩项目从上到下垂直排列
inline-axis                 伸缩项目沿着内联轴排列显示（显示类似于horizontal）
block-axis                  伸缩项目沿着块轴排列显示（显示类似于vertical）

 div{
        -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
}

3、box-direction            设置伸缩容器中的流动顺序（处理文本从左边还是从右边开始显示）
属性值如下所示：
normal                  默认值，正常顺序，文字段落从左列向右列显示
reverse                 逆序，文字段落从右列向左列显示

4、box-pack                 伸缩项目的分布方式（处理所有列如何水平分布）
属性值如下所示：
start                   默认，伸缩项目以起始点靠齐
end                     伸缩项目以结束点对齐
center                  伸缩项目以中心点对齐
justify                 伸缩项目平均分布，-webkit-支持，-moz-不支持
注意：使用该属性值的前提是设置了该属性的宽度

5、box-align                用来处理伸缩容器额外的空间（处理每列的空白）
属性值如下所示：
stretch               默认，伸缩项目填充整个容器
start                 伸缩项目以顶部为基准，清理下部额外空间
end                   伸缩项目以底部为基准，清理上部额外空间
center                伸缩项目以中部为基准，平均清理上下部额外空间
baseline              伸缩项目以基线为基准，清理额外的空间
//基线默认都是在开头，即效果和start相同

 div{
        -moz-box-align:center;
}

6、box-flex              使用浮点数分配伸缩项目的比例，设置每个伸缩项目占用的比例

 p:nth-child(1){
        -moz-box-flex:1;
}
p:nth-child(2){
        -moz-box-flex:3;
}
p:nth-child(3){
        -moz-box-flex:1;
}
//则从左到右，这三个列所占该元素的比例为20%，60%，20%

7、box-ordinal-group[ˈɔ:rdənl]         设置伸缩项目的显示位置

 p:nth-child(1){
        -moz-box-ordinal-group:3;     
}

//将第一个位置的元素，跳转到第三个位置，（无论是显示的内容，还是内容所在的<p>）
注意：最好将所有列的显示位置都设置一遍，避免意外情况的发生

二、混合过渡版本
主要针对微软公司，为了使IE 10+可以使用弹性线性布局
1、display属性值设为flexbox或inline-flexbox
flexbox               将容器盒模型作为块级弹性伸缩盒显示（旧版本）
inline-flexbox        将容器盒模型作为内联级弹性伸缩盒模型（旧版本）
但是实际上，这两个属性值在页面上的显示效果相同。
flexbox和inline-flexbox属性值需要加前缀，因为目前css3没有标准格式。

 div{
        display:-ms-flexbox;
}

2、flex-direction      相当于旧版本的box-orient和box-direction的结合
属性值如下所示：
row               默认值，列水平分布，内容从左到右排列
row-reverse       列水平分布，内容从右到左排列
column            列垂直分布，内容从上到下排列
column-reverse    列垂直分布，内容从下到上排列

3、flex-wrap           设置浏览器窗口无法容纳时，是否换行
nowrap            默认值，都在一行或一列显示
wrap              伸缩项目无法容纳时，自动换行
wrap-reverse      伸缩项目无法容纳时，自动换行，方向和wrap相反。本来换行应该从最后
一列开始换行，但设置该属性后，从第一列开始换行

4、flex-flow            集合了排列方向和控制换行的简写形式

 div{
        -ms-flex-flow:row wrap;
}

5、flex-pack            属性和属性值与box-pack一样，设置伸缩项目的水平对齐方式

6、flex-align           属性和属性值与box-align一样，设置伸缩项目的垂直对齐方式

7、flex                 属性和属性值与box-flex一样，设置每个伸缩项目所占用的比例

8、flex-order           属性和属性值与box-ordinal-group一样，设置伸缩项目出现的位置

三、新版本
兼容IE 11+和其他浏览器的新版本
1、display属性值设为flex或inline-flex
flex              将容器盒模型作为块级弹性伸缩盒显示（旧版本）
inline-flex       将容器盒模型作为内联级弹性伸缩盒模型（旧版本）
但是实际上，这两个属性值在页面上的显示效果相同。

 div{
        display:flex;
}

2、flex-direction      相当于旧版本的box-orient和box-direction的结合
属性值如下所示：
row               默认值，列水平分布，内容从左到右排列
row-reverse       列水平分布，内容从右到左排列
column            列垂直分布，内容从上到下排列
column-reverse    列垂直分布，内容从下到上排列

3、flex-wrap           设置浏览器窗口无法容纳时，是否换行
nowrap            默认值，都在一行或一列显示
wrap              伸缩项目无法容纳时，自动换行
wrap-reverse      伸缩项目无法容纳时，自动换行，方向和wrap相反。本来换行应该从最后
一列开始换行，但设置该属性后，从第一列开始换行

4、flex-flow            集合了排列方向和控制换行的简写形式

 div{
        -ms-flex-flow:row wrap;
}

5、justify-content      属性和属性值与box-pack一样，设置伸缩项目的水平对齐方式
属性值如下所示：
flex-start          伸缩项目以起始点靠齐
flex-end            伸缩项目以结束点靠齐
center              伸缩项目以中心点靠齐
space-between       伸缩项目平均分布
space-around        同上，但两端保留(相邻两列之间距离)一半的空间

 div{
        justify-content:space-around;
}

6、align-items          属性和属性值与box-align一样，设置伸缩项目的垂直对齐方式
属性值如下所示：
stretch               默认，伸缩项目填充整个容器
flex-start            伸缩项目以顶部为基准，清理下部额外空间
flex-end              伸缩项目以底部为基准，清理上部额外空间
center                伸缩项目以中部为基准，平均清理上下部额外空间
baseline              伸缩项目以基线为基准，清理额外的空间
//基线默认都是在开头，即效果和start相同

 div{
        align-items:center;
}

7、align-self           功能、属性值和align-items一样，但他处理的是某一个伸缩项目

8、flex                 属性和属性值与box-flex一样，设置每个伸缩项目所占用的比例

9、order           属性和属性值与box-ordinal-group一样，设置伸缩项目出现的位置

注意：标准弹性伸缩布局要求浏览器的版本过高，因此需要在标准格式之前加上带前缀的样式