CSS flex

/*parent*/
.v-f{
    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 */
}
/*level*/
.v-fc{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -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 */
}
/*vertical*/
.v-fm{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -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 */
}
.v-fcm{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -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 */
    -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 */
}
/*child  自动平分剩余空间(水平方向)*/
.v-i1{
    -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 */
}

安卓4.2中 父元素使用 v-fm （垂直居中）的时候 子元素要用 display:block; 才能使其居中。

1.当父级元素使用了：v-fm的时候 发现子元素单行字体并没有与原来的图表对其一行，那就是line-height影响到了布局，清除行高使用： line-height: initial;

面对这样的布局，设置前3个列的宽度值，然后在最后一列 加入class：v-i1; 如果要控制里面内容的显示区域，可以加入padding-left/padding-right；来控制里面内容的显示区域；溢出消失则增加样式：overflow:hidden; 上述 是将前3块设置相应的宽度，后一块平分剩余部分的宽度值！