@mixin flex-content() {
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	flex-flow: row wrap;
	align-items: baseline;

	& > * { // all 1st gen children of flex-content should be inline-block
		display: inline-block
	}
}
/**
 * Creates the boilerplate CSS for flexbox columns if you follow the appropriate naming procedure.
 * @param  {string} $base_col_class    The base column class: ex: cols-2, the code will append the number (for two columns in this example, but you need to provide "cols" to it.
 * @param  {integer} $min:              1            The number to begin iteration at
 * @param  {integer} $max:              6             The number to end iteration at
 * @param  {string} $s_breakout_width: '500px'       The width where the columns will go 50% width
 * @param  {string} $m_breakout_width: '1000px'      The width where columns will go 33.3% width
 * @param  {string} $l_breakout_width: '1200px'      The width where columns will be divided as requested: ;
 * @param  {string} $gutter:           '20px'        The spacing between elements. This uses flexbox justify-content: space-between
 * @return {string}                                  A lot of CSS
 */
@mixin columnsContainer($base_col_class, $min: 1, $max: 6, $s_breakout_width: '500px', $m_breakout_width: '1000px', $l_breakout_width: '1200px', $gutter: '20px') {
    @include flex-content();


    [class*="#{$base_col_class}"] {
        width: 100%;
    }

    @media (min-width: $s_breakout_width) {
        @for $i from 2 through $max {
            @include _columnsWidths($base_col_class, $i, $gutter, 2);
        }
    }

    @media (min-width: $m_breakout_width) {
        @for $i from 3 through $max {
            @include _columnsWidths($base_col_class, $i, $gutter, 3);
        }
    }

    @media (min-width: $l_breakout_width) {
        @for $i from 4 through $max {
            @include _columnsWidths($base_col_class, $i, $gutter);
        }
    }
}

/**
 * Basically called by columnsContainer mixin, but can be used anywhere I guess
 * Returns 100% divided by $i with the base class prepended
 *
 * Ex: @include columnsWidths('base',3)
 * will return .base-3 {width: calc(100% / 3);}
 */
/**
 * Creates a CSS class for creating columns from some variables
 * @param  {string} $base_class                 The "prepend" for the column class: ex: If your column class is "cols-2" provide "cols"
 * @param  {integer} $i                         Iteration index
 * @param  {string} $gutter                     The amount of space between columns
 * @param  {integer} $override:  null           Pass in a number to override columns, used for responsive CSS. ex: pass in 2, will return 50% columns with gutters accounted for no matter what
 * @return {string}                             A bunch of CSS
 */
@mixin _columnsWidths($base_class, $i, $gutter: 10px, $override: null) {
    @if($override) {
        .#{$base_class}-#{$i} {
            width: calc(100% / #{$override} - #{$gutter}) !important;
        }
    } @else {
        .#{$base_class}-#{$i} {
            width: calc(100% / #{$i} - #{$gutter}) !important;
        }
    }

}

// usage

.columns-container {
  @include columnsContainer('col');
}