flexbox-grid.less

flexbox-grid.less

/* experimental, flexbox grid */
@fg_total_columns: 12;

.fg-row {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
}
.fg-col-base { 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fg-col-generator (@index:1) when (@index <= @fg_total_columns) {
    .fg-col-@{index} {
        &:extend(.fg-col-base);
        flex-basis: @index / @fg_total_columns * 100%;
    }
    .fg-col-generator(@index + 1);
}
.fg-col-offset-generator (@index:1) when (@index < @fg_total_columns) {
    .fg-col-offset-@{index} {
        margin-left: (@index) / @fg_total_columns * 100%;
    }
    .fg-col-offset-generator(@index + 1);
}

.fg-col-generator();
.fg-col-offset-generator();

.fg-col-auto {
    flex: 1 1 0;
}