CSS3.0盒模型display:flex;的使用[相容微信瀏覽器]
話不多說，上程式碼，關鍵在對應的低版本安卓的微信瀏覽器，需要-webkit-box對應的-webkit-box-orient -webkit-box-pack等的設定。
.flex{
/* 設定彈性佈局 */
display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */
display:-webkit-flex;/* Chrome 21+ */
display:-ms-flexbox;/* WP IE 10 */
display:flex;/* android 4.4 */
}
.flex-direction-column{
/* 設定彈性佈局的方向，子元素按照在源文件中宣告的順序從上到下顯示 */
-webkit-box-orient: vertical;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex-direction: column;/* Chrome 21+ */
-ms-flex-direction: column;/* WP IE 10 */
flex-direction: column;/* android 4.4 */
}
.flex-1{
/* 子元素自動佔據剩餘的空間 */
-webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex:1;/* Chrome 21+ */
-ms-flex:1;/* WP IE 10 */
flex:1;/* android 4.4 */
}
.flex-pack-center{
/* 水平佈局下的子元素 水平居中 */
-webkit-box-pack: center;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: center;/* Chrome 21+ */
-ms-flex-pack: center;/* WP IE 10 */
justify-content: center;/* android 4.4 */
}
.flex-align-center{
/* 水平佈局下的子元素 垂直居中 */
-webkit-box-align: center;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-align-items: center;/* Chrome 21+ */
-ms-flex-align: center;/* WP IE 10 */
align-items: center;/* android 4.4 */
}
.flex-pack-justify{
/* 水平佈局下的子元素 2端對齊 */
-webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: space-between;/* Chrome 21+ */
-ms-flex-pack: justify;/* WP IE 10 */
justify-content: space-between;/* android 4.4 */
}