flex分列布局

原创
02/12 14:26
阅读数 272
.flex-row {
    display: flex;
}

.flex-row::after {
    display: none
}

.flex-row-justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.flex-row-justify-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

.flex-row-justify-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.flex-row-justify-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around
}

.flex-row-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.flex-row-align-bottom {
    -webkit-box-align: bottom;
    -webkit-align-items: bottom;
    align-items: bottom
}

.flex-col {
    box-sizing: border-box;
}

.flex-col-1 {
    width: 4.16666667%
}

.flex-col-offset-1 {
    margin-left: 4.16666667%
}

.flex-col-2 {
    width: 8.33333333%
}

.flex-col-offset-2 {
    margin-left: 8.33333333%
}

.flex-col-3 {
    width: 12.5%
}

.flex-col-offset-3 {
    margin-left: 12.5%
}

.flex-col-4 {
    width: 16.66666667%
}

.flex-col-offset-4 {
    margin-left: 16.66666667%
}

.flex-col-5 {
    width: 20.83333333%
}

.flex-col-offset-5 {
    margin-left: 20.83333333%
}

.flex-col-6 {
    width: 25%
}

.flex-col-offset-6 {
    margin-left: 25%
}

.flex-col-7 {
    width: 29.16666667%
}

.flex-col-offset-7 {
    margin-left: 29.16666667%
}

.flex-col-8 {
    width: 33.33333333%
}

.flex-col-offset-8 {
    margin-left: 33.33333333%
}

.flex-col-9 {
    width: 37.5%
}

.flex-col-offset-9 {
    margin-left: 37.5%
}

.flex-col-10 {
    width: 41.66666667%
}

.flex-col-offset-10 {
    margin-left: 41.66666667%
}

.flex-col-11 {
    width: 45.83333333%
}

.flex-col-offset-11 {
    margin-left: 45.83333333%
}

.flex-col-12 {
    width: 50%
}

.flex-col-offset-12 {
    margin-left: 50%
}

.flex-col-13 {
    width: 54.16666667%
}

.flex-col-offset-13 {
    margin-left: 54.16666667%
}

.flex-col-14 {
    width: 58.33333333%
}

.flex-col-offset-14 {
    margin-left: 58.33333333%
}

.flex-col-15 {
    width: 62.5%
}

.flex-col-offset-15 {
    margin-left: 62.5%
}

.flex-col-16 {
    width: 66.66666667%
}

.flex-col-offset-16 {
    margin-left: 66.66666667%
}

.flex-col-17 {
    width: 70.83333333%
}

.flex-col-offset-17 {
    margin-left: 70.83333333%
}

.flex-col-18 {
    width: 75%
}

.flex-col-offset-18 {
    margin-left: 75%
}

.flex-col-19 {
    width: 79.16666667%
}

.flex-col-offset-19 {
    margin-left: 79.16666667%
}

.flex-col-20 {
    width: 83.33333333%
}

.flex-col-offset-20 {
    margin-left: 83.33333333%
}

.flex-col-21 {
    width: 87.5%
}

.flex-col-offset-21 {
    margin-left: 87.5%
}

.flex-col-22 {
    width: 91.66666667%
}

.flex-col-offset-22 {
    margin-left: 91.66666667%
}

.flex-col-23 {
    width: 95.83333333%
}

.flex-col-offset-23 {
    margin-left: 95.83333333%
}

.flex-col-24 {
    width: 100%
}

.flex-col-offset-24 {
    margin-left: 100%
}

参考了vant 1.6.0,vant的van-col用的是float

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部