a flexbox framework based on http://codepen.io/marcolago/pen/lqGFb

flexbox-framework.scss

.row {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.col {
    flex: 1 1 8%;
    margin: 0 0 0.5rem 0;
    padding: 0.5em 10px;
    box-sizing: border-box;
}

/* nested grids */
.row .row, .row.nested {
    flex: 1 1 auto;
    margin-top: -0.5em;
}

// columns widths
// -----
.col-span-1 {
    @extend .col;
    flex-basis: 8.3333%;
}

.col-span-2 {
    @extend .col;
    flex-basis: 16.6666%; 
}

.col-span-3 {
    @extend .col;
    flex-basis: 25%;
}

.col-span-4 {
    @extend .col;
    flex-basis: 33.3333%;
}

.col-span-5 {
    @extend .col;
    flex-basis: 41.6666%;
}

.col-span-6 {
    @extend .col;
    flex-basis: 50%;
}

.col-span-7 {
    @extend .col;
    flex-basis: 58.3333%;
}

.col-span-8 {
    @extend .col;
    flex-basis: 66.6666%;
}

.col-span-9 {
    @extend .col;
    flex-basis: 75%;
}

.col-span-10 {
    @extend .col;
    flex-basis: 83.3333%;
}

.col-span-11 {
    @extend .col;
    flex-basis: 91.6666%;
}

.col-span-12 {
    @extend .col;
    flex-basis: 100%;
}

// grid responsiveness
// -----
@media all and (max-width: 500px) {
    .col-span-1,
    .col-span-2,
    .col-span-3,
    .col-span-4,
    .col-span-5 {
        flex-basis: 50%;
    }
    .col-span-6,
    .col-span-7,
    .col-span-8,
    .col-span-9,
    .col-span-10,
    .col-span-11 {
        flex-basis: 100%;
    }
    .nested .col {
        flex-basis: 100%;
    }
}

// grid utilities
// -----
.fixed-width {
    flex: 0 0 500px;
}

.row.wide-fit {
    margin-left: -10px;
    margin-right: -10px;
}

.row.center {
    justify-content: center;
}

.center .col {
    flex-grow: 0;
    flex-shrink: 0;
}