flexbox佈局相容性寫法
阿新 • • 發佈：2018-12-31
/*父元素-橫向排列（主軸）*/
display:box; （伸縮盒最老版本）
display:-webkit-box; /* iOS 6-, Safari 3.1-6 */
display:-webkit-flex; /* Chrome */
display:-moz-box; /* Firefox 19 */
display:-ms-flexbox;
display:flex; /*flex容器*/
/*方向*/
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction:row; 【新版本語法】
/*父元素-水平居中（主軸是橫向才生效）*/【新版本語法】
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/*子元素-垂直居中（在側軸、縱軸上）*/【新版本語法】
-webkit-align-items:center;
-moz-align-items:center;
-ms-align-items:center;
-o-align-items:center;
align-items:center;
/*父元素-橫向換行 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
/* 子元素—平分比例 */
-prefix-box-flex: 1; /* old spec webkit, moz */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-webkit-flex: 1; /* Chrome */
-moz-box-flex: 1; /* Firefox 19- */
-ms-flex: 1; /* IE 10 */
width:20%;
flex: 1; /* NEW, Opera 12.1, Firefox 20+ */
flex: 2;
不寫flex數值預設不可以伸縮。
/* 子元素-用於改變源文件順序顯示 */
-prefix-box-ordinal-group: 1; /* old spec; must be positive */
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
order: 3;
【老版本語法】
/*居中 */
box-pack:center; //水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;
/*子元素方向 */
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
display:box; （伸縮盒最老版本）
display:-webkit-box; /* iOS 6-, Safari 3.1-6 */
display:-webkit-flex; /* Chrome */
display:-moz-box; /* Firefox 19 */
display:-ms-flexbox;
display:flex; /*flex容器*/
/*方向*/
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction:row; 【新版本語法】
/*父元素-水平居中（主軸是橫向才生效）*/【新版本語法】
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/*子元素-垂直居中（在側軸、縱軸上）*/【新版本語法】
-webkit-align-items:center;
-moz-align-items:center;
-ms-align-items:center;
-o-align-items:center;
align-items:center;
/*父元素-橫向換行 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
/* 子元素—平分比例 */
-prefix-box-flex: 1; /* old spec webkit, moz */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-webkit-flex: 1; /* Chrome */
-moz-box-flex: 1; /* Firefox 19- */
-ms-flex: 1; /* IE 10 */
width:20%;
flex: 1; /* NEW, Opera 12.1, Firefox 20+ */
flex: 2;
不寫flex數值預設不可以伸縮。
/* 子元素-用於改變源文件順序顯示 */
-prefix-box-ordinal-group: 1; /* old spec; must be positive */
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
order: 3;
【老版本語法】
/*居中 */
box-pack:center; //水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;
/*子元素方向 */
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;