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