Simple flexbox grid

flexbox-grid.scss

@mixin element($e) {
    &__#{$e} { @content; }
}

@mixin modifier($e) {
    &--#{$e} { @content; }
}

.grid {
    $gutter: 30px;
    $items-in-row: 2;
    $basis: 100% * (1 / $items-in-row);

    @include element('row') {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin-left: -1 * $gutter;
        margin-right: -1 * $gutter;
    }

    @include element('item') {
        flex: 1 0 $basis;
        padding: 0 $gutter;

        @include modifier('pull-top') {
            align-self: flex-start;
        }

        @include modifier('pull-bottom') {
            align-self: flex-end;
        }

        @include modifier('pull-middle') {
            align-self: center;
        }
    }
}