Flex 版本及兼容

2009年，W3C 提出了一种新的方案 — Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，Flex 布局将成为未来布局的首选方案。

版本更迭

flex弹性盒模型有3个版本：旧版本、混合版本和新版本，flexbox布局的语法规范经过几年发生了很大的变化。

从2007年07月，flex第一版本的工作草案发布，到2012年09月，flex最新版本成为候选推荐。flex主要经历了三个版本：

• 旧版本 display:box | inline-box;

IE浏览器不支持，windows下的safari浏览器只支持旧版本的写法且需要添加前缀，移动端可以兼容到andriod2.1-4.3和ios3.2-6.1也需要添加前缀。

• 混合版本 display:flexbox | inline-flexbox;

该版本只有IE10支持，且需要添加前缀-ms-

• 新版本 display: flex | inline-flex

该版本兼容IE11+、firefox、safari、chrome、opera及移动端，但移动端ios7.1-8.4需要添加前缀-webkit-

旧版flex及兼容（了解）

如果要保证flex弹性盒模型在各个主流浏览器上表现一致，就必须掌握 3 个版本的不同用法。

[ 适用范围 ] 旧版本是指最早的flex版本，该版本的flex应用在safari3.1-6 ( 主要表现在windows系统下的safari浏览器 )、ios3.2-6.1、android2.1-4.3。且都需要添加-webkit-前缀。

[ 伸缩项目 ] 旧版本flex要求伸缩项目必须是block元素。

<span>
    <span>项目一</span>
    <span>项目二</span>
    <span>项目三</span>
    <span>项目四</span>
</span>

[ 伸缩流方向 ] 旧版本flex的伸缩流方向中的reverse值，只改变伸缩项目的排列顺序，并不改变其对齐方式。

所以，建议使用direction:rtl来实现伸缩流反向效果。

[ 伸缩流换行 ] 旧版本flex不支持伸缩流换行，所以在其他版本flex中尽量不要使用换行操作。

[ 主轴对齐 ] 旧版本flex的主轴对齐属性中没有扩散对齐属性space-around，所以在其他版本flex中尽量不要使用该属性值。

[ 伸缩性 ] 旧版本的伸缩性只有一个值，表示基于伸缩项目本身尺寸大小的扩展或收缩比率，旧版本的-webkit-box-flex:1;相当于新版本的flex:auto;所以要想实现不基于伸缩项目本身尺寸大小的伸缩需要显式地将伸缩项目的宽度width设置为0。

该值支持小数，但不能为负数。

[ 显示顺序 ] 旧版本flex的显示顺序是以1为默认值的正整数，而新版本flex的显示顺序是以0为默认值的自然数。

所以，在设置显示顺序时，跳过1，从2开始设置。

 flex 兼容

以下是flex模块的常用兼容代码：

/*display*/
.display_flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.display_flex > *{
    display: block;
}
.display_inline-flex{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;    
}
.display_inline-flex > *{
    display: block;
}
/*伸缩流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸缩性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;    
}
/*显示顺序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}