Basic SCSS Flexbox Grid

_flex-grid.scss

/**
* Basic Flex Grid
* ----------------
* This is a simple flex grid I've been using on a lot of projects. It supports both
* flexible grids as well as rigid column grids. While this is currently designed for internal use
* (it uses flexbox mixins because our build pipeline doesn't support autoprefixer yet), it's not too difficult
* to use in your own projects. Simply replace the flexbox mixins with their relevant rules, and you'll be good
* to go.
* @author Gabe Rose <https://gist.github.com/roseg43>
**/
.flex-row {
    @include flexbox();
    @include flex-wrap(wrap);
    margin-left: -15px !important;
    margin-right: -15px !important;
    &.flex-row-space-between {
        @include justify-content(space-between);
    }
    &.flex-row-inline {
        @include flex-flow(row);
    }
    &.flex-row-center {
        @include justify-content(center);
    }
    &.flex-row-grid {
        @include justify-content(center);
        @include align-items(center);
        margin: -60px -15px 0;
        &.top-align {
            @include align-items(flex-start);
        }
    }
    & > * {
        @include flex(1 0 auto);
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }
    @for $i from 1 through 12 {
        &.flex-#{$i}-col > * {
            width: calc(100% / #{$i} - 30px);
            @media (max-width: 767px) {
                width: calc(100% - 30px);
                margin-top: 25px;
            }
        }
    }
    @media (min-width: 991px) and (max-width: 1199px) {
        &.flex-4-col > * {
            width: calc(50% - 30px);
            margin-top: 25px;
        }
    }
    @media (max-width: 990px) {
        &.flex-3-col > * {
            width: 100%;
            margin-top: 25px;
        }
        &.flex-4-col > * {
            width: calc(50% - 30px);
            margin-top: 25px;
        }
        &.flex-6-col > *,
        &.flex-5-col > * {
            width: calc(25% - 30px);
            margin-top: 25px;
        }
    }
    .column {
        @include flex (1 0 auto);
    }
    .flex-item {
        @include flex(1 0 auto);
        margin-top: 30px;
        text-align: center;
        @media (max-width: 767px) {
            @include flex-basis(100%);
        }
    }
    &.flex-row-inline > *,
    &.flex-row.inline .column{
        @include flex(0 1 auto);
    }
    &.left-align .flex-item {
        text-align: left;
    }
    &.flex-row-grid--static .flex-item {
        @include flex(0 0 auto);
        width: 25%;
        @media (max-width: 767px) {
            width: 50%;
        }
    }
}