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 */

}