ElinaLuo / flex-style

flex布局，兼容各浏览器

flex-style

flex兼容写法

1.兼容性

测试结果：

1. android从4.4版本开始支持flex
2. android 4.0~4.3 部分支持-webkit-flex，另一部分不支持
3. 测试中发现奇葩机器华为6.0以下（不包含6.0）也不支持flex 下面是通过CanIUse中得出
4. safari 7.1以下只支持box，7.1+支持-webkit-flex
5. IE10以下不支持box，10+支持-ms-flex

总的来说，想实现弹性布局，需要同时使用box和flex

2.兼容写法：

/* flex 容器 */
.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
/* 元素垂直从上到下排列 */
.flex-vertical {
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/* 元素垂直从下到上排列 */
.flex-vertical {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
/* 元素水平从左到右排列 */
.flex-horizontal {
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
/* 元素水平从右到左排列 */
.flex-horizontal-reverse {
    -webkit-box-pack: end;/* box-direction只改变方向，需要box-pack改版对齐方式 */
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-1 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    flex: 2;
}
.flex-3 {
    -moz-box-flex: 1;
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
}

/* align-items：垂直交叉轴的对齐方式 */
.flex-align-start {
    -moz-box-align: start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.flex-align-center {
    -moz-box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.flex-align-end {
    -moz-box-align: end;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.flex-align-stretch {
    -moz-box-align: stretch;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.flex-align-baseline {
    -moz-box-align: baseline;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

/* justify-content：主轴的对齐方式 */
.mb-flex-justify-start {
    -moz-box-pack: start;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.mb-flex-justify-center {
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.mb-flex-justify-end {
    -moz-box-pack: end;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.mb-flex-justify-space-between {
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

3.参考资料：

• flex布局兼容性问题
• 阮一峰-Flex 布局教程：语法篇
• 阮一峰-Flex 布局教程：实例篇

4.最后