@import './global.less';
.k-row {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    zoom: 1;
    display: block;
    box-sizing: border-box;
    &:after,
    &:before {
        content: "";
        display: table;
        box-sizing: border-box;
    }
    &:after {
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
    }
}

@fix :~'k-col';
@counts :24;
.makecol(@index) when(@index>0) {
    .@{fix}-@{index} {
        display: block;
        float: left;
        box-sizing: border-box;
        width: percentage((@index / @counts));
    }
    .@{fix}-offset-@{index} {
        margin-left: percentage((@index / @counts));
    }
    .makecol((@index - 1));
}

.makecol(@counts);

// flex布局 横向对其方式
.k-row-flex{
    display:flex;
}
.k-row-flex-start{
    justify-content: start;
}
.k-row-flex-center{
    justify-content: center;
}
.k-row-flex-space-between{
    justify-content: space-between;
}
.k-row-flex-space-around{
    justify-content: space-around;
}
.k-row-flex-top{
    align-items: top;
}
.k-row-flex-middle{
    align-items: middle;
}
.k-row-flex-bottom{
    align-items: bottom;
}