heyui/themes/common/layout.less

A UI components Library.

@row-prefix: ~"@{prefix}row";
@col-prefix: ~"@{prefix}col";
@col-prefix-xs: ~"@{prefix}col-xs";
@col-prefix-sm: ~"@{prefix}col-sm";
@col-prefix-md: ~"@{prefix}col-md";
@col-prefix-lg: ~"@{prefix}col-lg";
@col-prefix-xl: ~"@{prefix}col-xl";
@grid-columns: 24;
.loop-grid-columns(@index, @class) when (@index > 0) {
    .@{class}-@{index} {
        float: left;
        display: block;
        width: percentage((@index / @grid-columns));
    }
    .loop-grid-columns((@index - 1), @class);
}

.loop-grid-columns(@grid-columns, @col-prefix);
@media (min-width: 1800px) {
    .loop-grid-columns(@grid-columns, @col-prefix-xl);
}

@media (min-width: 1200px) and (max-width: 1800px) {
    .loop-grid-columns(@grid-columns, @col-prefix-lg);
}

@media (min-width: 992px) and (max-width: 1200px) {
    .loop-grid-columns(@grid-columns, @col-prefix-md);
}

@media (min-width: 768px) and (max-width: 992px) {
    .loop-grid-columns(@grid-columns, @col-prefix-sm);
}

@media (max-width: 768px) {
    .loop-grid-columns(@grid-columns, @col-prefix-xs);
}

.@{row-prefix} {
    .clearfix();
    display: block;
}

.@{row-prefix}-flex {
    .clearfix();
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &:before,
    &:after {
        display: flex;
    }
    // x轴原点
    &-start {
        justify-content: flex-start;
    }
    // x轴居中
    &-center {
        justify-content: center;
    }
    // x轴反方向
    &-end {
        justify-content: flex-end;
    }
    // x轴平分
    &-space-between {
        justify-content: space-between;
    }
    // x轴有间隔地平分
    &-space-around {
        justify-content: space-around;
    }
    // 顶部对齐
    &-top {
        align-items: flex-start;
    }
    // 居中对齐
    &-middle {
        align-items: center;
    }
    // 底部对齐
    &-bottom {
        align-items: flex-end;
    }
    &-row-reverse {
        flex-direction: row-reverse;
    }
    &-column {
        flex-direction: column;
    }
    &-column-reverse {
        flex-direction: column-reverse;
    }
}