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