CSS3 弹性伸缩布局（中）（20160906-0037）

一、混合过渡版

混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是针对 IE10 浏览器实现的伸缩布局效果，其功能和旧版本的属性大同小异。

首先，设置伸缩盒的 display 属性：

属性值	说明
flexbox	将容器盒模型作为块级弹性伸缩盒显示（混合版本）
inline-flexbox	将容器盒模型作为内联级弹性伸缩盒显示（混合版本）

@charset "utf-8";

p{
width: 200px;
border: 1px solid gray;
background-color: silver;
margin: 5px;
padding: 5px;
}

div{
/* 设置弹性，将容器盒模型作为块级弹性伸缩盒显示（混合版本） */
display: -moz-flexbox;
display: -webkit-flexbox;
display: flexbox;

/* 设置弹性，将容器盒模型作为内联级弹性伸缩盒显示（混合版本） */
/*display: -moz-inline-flexbox;
display: -webkit-inline-flexbox;
display: -ms-inline-flexbox;
display: inline-flexbox;*/
}

/************************* flex-direction *************************/
div{
/* 设置从左到右排列 */
/*flex-direction: row;*/

/* 设置从右到左排列 */
/*flex-direction: row-reverse;*/

/* 设置从上到下排列 */
/*flex-direction: column;*/

/* 设置从下到上排列 */
/*flex-direction: column-reverse;*/
}

/************************* flex-wrap *************************/
div{
/* 默认值，都在一行或一列显示 */
/*flex-wrap: nowrap;*/

/* 伸缩项目无法容纳时，自动换行 */
/*flex-wrap: wrap;*/

/* 伸缩项目无法容纳时，自动换行，方向和 wrap 相反 */
/*flex-wrap: wrap-reverse;*/
}

/************************* flex-flow *************************/
div{
/* 简写形式 */
/*flex-flow: row wrap;*/
}

/************************* flex-pack *************************/
div{
/* 伸伸缩项目以起始点靠齐 */
/*flex-pack: start;*/

/* 伸缩项目以结束点靠齐 */
/*flex-pack: end;*/

/* 伸缩项目以中心点靠齐 */
/*flex-pack: center;*/

/* 伸缩项目平均分布 */
/*flex-pack: justify;*/
}

/************************* flex-align *************************/
div{
/* 伸缩项目以顶部为基准，清理下部额外空间 */
/*flex-aign:start;*/

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

/* 伸缩项目以中部为基准，平均清理上下部额外空间 */
/*flex-aign:center;*/

/* 伸缩项目以基线为基准，清理额外空间 */
/*flex-aign:baseline;*/

/* 伸缩项目填充整个容器，默认 */
/*flex-aign:stretch;*/
}

/************************* flex *************************/
p:first-child{
flex: 1;
}

p:nth-child(2){
flex: 3;
}

p:last-child{
flex: 1;
}

/************************* flex-order *************************/
p:first-child{
flex-order: 2;
}

1、flex-direction

解释：和旧版本 box-orient 属性一样，都是设置伸缩项目的排列方式。

属性值	说明
row	设置从左到右排列
row-reverse	设置从右到左排列
column	设置从上到下排列
column-reverse	设置从下到上排列

2、flex-wrap
解释：类似旧版本中的box-lines。

属性值	说明
nowrap	默认值，都在一行或一列显示
wrap	伸缩项目无法容纳时，自动换行
wrap-reverse	伸缩项目无法容纳时，自动换行，方向和 wrap 相反

3、flex-flow
解释：是集合了排列方向和控制换行的简写形式。

4、flex-pack

解释：和旧版本中的 box-pack 一样，设置伸缩项目的对齐方式。

属性值	说明
start	伸缩项目以起始点靠齐
end	伸缩项目以结束点靠齐
center	伸缩项目以中心点靠齐
justify	伸缩项目平均分布

5、flex-align
解释：和旧版本中的 box-align 一样，处理伸缩项目容器的额外空间。

属性值	说明
start	伸缩项目以顶部为基准，清理下部额外空间
end	伸缩项目以底部为基准，清理上部额外空间
center	伸缩项目以中部为基准，平均清理上下部额外空间
baseline	伸缩项目以基线为基准，清理额外空间
stretch	伸缩项目填充整个容器，默认

6、flex
解释：和旧版本 box-flex 类似，用来控制容器的比例分配。

7、flex-order

解释：和 box-ordinal group 属性一样控制伸缩项目出现的顺序。

示例代码地址