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没有标准格式。

eg. div{

        display:-moz-box;

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

}

2、设置box-orient属性           实现盒子内部元素的流动方向

属性值如下所示：

horizontal                  默认值，伸缩项目从左到右水平排列

vertical                    伸缩项目从上到下垂直排列

inline-axis                 伸缩项目沿着内联轴排列显示（显示类似于horizontal）

block-axis                  伸缩项目沿着块轴排列显示（显示类似于vertical）

eg. 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相同

eg. div{

        -moz-box-align:center;

}

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

eg. 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]         设置伸缩项目的显示位置

eg. p:nth-child(1){

        -moz-box-ordinal-group:3;     

}

//将第一个位置的元素，跳转到第三个位置，（无论是显示的内容，还是内容所在的<p>）

注意：最好将所有列的显示位置都设置一遍，避免意外情况的发生

二、混合过渡版本

主要针对微软公司，为了使IE 10+可以使用弹性线性布局

1、display属性值设为flexbox或inline-flexbox

flexbox               将容器盒模型作为块级弹性伸缩盒显示（旧版本）

inline-flexbox        将容器盒模型作为内联级弹性伸缩盒模型（旧版本）

但是实际上，这两个属性值在页面上的显示效果相同。

flexbox和inline-flexbox属性值需要加前缀，因为目前css3没有标准格式。

eg. 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            集合了排列方向和控制换行的简写形式

eg. 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       将容器盒模型作为内联级弹性伸缩盒模型（旧版本）

但是实际上，这两个属性值在页面上的显示效果相同。

eg. 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            集合了排列方向和控制换行的简写形式

eg. div{

        -ms-flex-flow:row wrap;

}

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

属性值如下所示：

flex-start          伸缩项目以起始点靠齐

flex-end            伸缩项目以结束点靠齐

center              伸缩项目以中心点靠齐

space-between       伸缩项目平均分布

space-around        同上，但两端保留(相邻两列之间距离)一半的空间

eg. div{

        justify-content:space-around;

}

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

属性值如下所示：

stretch               默认，伸缩项目填充整个容器

flex-start            伸缩项目以顶部为基准，清理下部额外空间

flex-end              伸缩项目以底部为基准，清理上部额外空间

center                伸缩项目以中部为基准，平均清理上下部额外空间

baseline              伸缩项目以基线为基准，清理额外的空间

//基线默认都是在开头，即效果和start相同

eg. div{

        align-items:center;

}

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

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

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

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