flex 弹性盒子 兼容
1.弹性布局
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+ */
2.主轴居中
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
3.主轴两端对齐
-webkit-box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
4.主轴end对齐
-webkit-box-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
5.主轴start对齐
-webkit-box-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
6.侧轴居中
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
7.侧轴start对齐
-webkit-box-align: start;
-moz-align-items: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
8.侧轴底部对齐
-webkit-box-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
9.侧轴文本基本线对齐
-webkit-box-align: baseline;
-moz-align-items: baseline;
-webkit-align-items: baseline;
align-items: baseline;
10.侧轴上下对齐并铺满
-webkit-box-align: stretch;
-moz-align-items: stretch;
-webkit-align-items: stretch;
align-items: stretch;
11.主轴从上到下
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
12.主轴从下到上
-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;
13.主轴从左到右
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
14.主轴从右到左
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
15.不允许子元素缩小
-webkit-box-flex: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
16.各个行中间对齐
-webkit-align-content: center;
align-content: center;
17.各个行中间对齐
-webkit-align-content: flex-start;
align-content: flex-start;
18.各个行中间对齐
-webkit-align-content: flex-end;
align-content: flex-end;
19.各个行平均分布
-webkit-align-content: space-between;
align-content: space-between;
20.各个行两端保留子元素与子元素之间间距大小的一半
-webkit-align-content: space-around ;
align-content: space-around ;
21.父元素-横向换行
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
22.父元素-不允许横向换行
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap:nowrap;
23.充满父元素
-prefix-box-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
参考网站：https://www.cnblogs.com/amanda-man/p/9856557.html
