兼容浏览器版本
- Chrome 21+
- Opera 12.1+
- Firefox 22+
- Safari 6.1+
- IE 10+
浏览器对最新flexbox规范的支持情况：
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+ (前缀 -webkit-)
- Android 4.4+
- iOS 7.1+ (前缀 -webkit-)
定义弹性布局盒子
display
display: -webkit-box; / 老版本语法: Safari, iOS, Android browser, older WebKit browsers. /
display: -moz-box; / 老版本语法: Firefox (buggy) /
display: -ms-flexbox; / 混合版本语法: IE 10 /
display: -webkit-flex; / 新版本 语法： Chrome 21+ /
display: flex; / 新版本语法： Opera 12.1, Firefox 22+ /
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;定义子元素排列
flex-direction
-webkit-box-orient:vertical; -webkit-box-direction:normal; -moz-box-orient:vertical; -moz-box-direction:normal; flex-direction:column; -webkit-flex-direction:column;横向排列布局
justify-content
-webkit-justify-content:center; justify-content:center; -moz-box-pack:center; -webkit--moz-box-pack:center; box-pack:center;竖向排列布局
align-items
align-items:center; -webkit-align-items:center; box-align:center; -moz-box-align:center; -webkit-box-align:center;伸缩盒子布局兼容
flex
box-flex:num; -webkit-box-flex:num; -moz-box-flex:num; flex:num; -webkit-flex:num;汇总
/* flex弹性盒布局兼容性写法样式文件 * 常用类 * display__flex * flex_direction__column * flex_wrap__wrap * justify_content__center * justify_content__space_between * justify_content__space_around * align_items__center * flex_grow__1 * flex_shrink__0*//* 设置在弹性容器上的属性*/.display__flex { display: -webkit-box; display: -ms-flexbox; display: flex;}/*flex-direction属性决定主轴的方向（即项目的排列方向）。*/.flex_direction__row_reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}.flex_direction__column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}.flex_direction__column_reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}/*默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。*/.flex_wrap__nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap;}.flex_wrap__wrap { -ms-flex-wrap: wrap; flex-wrap: wrap;}.flex_wrap__wrap_reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;}/*justify-content属性定义了项目在主轴上的对齐方式。*/.justify_content__flex_start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;}.justify_content__flex_end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}.justify_content__center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}.justify_content__space_between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}.justify_content__space_around { -ms-flex-pack: distribute; justify-content: space-around;}/*align-items属性定义项目在交叉轴上如何对齐。*/.align_items__flex_start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}.align_items__flex_end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}.align_items__center { -webkit-box-align: center; -ms-flex-align: center; align-items: center;}.align_items__baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;}/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/.align_content__flex_start { -ms-flex-line-pack: start; align-content: flex-start;}.align_content__flex_end { -ms-flex-line-pack: end; align-content: flex-end;}.align_content__center { -ms-flex-line-pack: center; align-content: center;}.align_content__space_between { -ms-flex-line-pack: justify; align-content: space-between;}.align_content__space_around { -ms-flex-line-pack: distribute; align-content: space-around;}/* 设置在弹性项目上的属性*//*order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。以下是兼容样式写法示例，可根据需要修改属性值。*/.order__1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;}/*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。以下是兼容样式写法示例，可根据需要修改属性值。*/.flex_grow__1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;}/*flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。以下是兼容样式写法示例，可根据需要修改属性值。*/.flex_shrink__0 { -ms-flex-negative: 0; flex-shrink: 0;}/* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 以下是兼容样式写法示例，可根据需要修改属性值。*/.flex_basis__100px { -ms-flex-preferred-size: 100px; flex-basis: 100px;}/*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/.align_self__flex_start { -ms-flex-item-align: start; align-self: flex-start;}.align_self__flex_end { -ms-flex-item-align: end; align-self: flex-end;}.align_self__center { -ms-flex-item-align: center; align-self: center;}.align_self__baseline { -ms-flex-item-align: baseline; align-self: baseline;}safari
父元素设为display:flex;没有问题，但子元素flex:1这种标注在safari中不能用！子元素使用的话只能设为flex:auto，如果想实现flex:1这种效果，请用：
flex-grow:1;flex-shrink:1;flex-basis:0;这三个拆分的元素代替，flex属性就是上面三个属性的复合简写。