CSS flex

最新推荐文章于 2025-08-06 19:41:07 发布

原创最新推荐文章于 2025-08-06 19:41:07 发布 · 497 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

6 篇文章

订阅专栏

/*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块设置相应的宽度，后一块平分剩余部分的宽度值！