$flex-align-map: (
    top: flex-start,
    bottom: flex-end,
    left: flex-start,
    right: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
    baseline: baseline
);

// justify-content - Align blocks/lines on main axis.
// align-content - Align blocks/lines on cross axis. This is the opposite of justify-content.
// align-items - Align blocks within a line on the cross axis when each block has a variable height.

// Calculate the width of an individual flex block.
// Take into account max widths and gutters.
@function flex-span($n, $columns, $width: $flex-width, $gutter: $flex-gutter) {
    @return span-width($n, $columns, $width, $gutter);
}

// Styles for the region that contains blocks.
@mixin flex-region($width: $flex-width) {
    display: flex;
    max-width: $width;
}

// Align the blocks within a region horizontally or vertically.
@mixin flex-region-align($align: left) {
    justify-content: map-get($flex-align-map, $align);
}

// Set the orientation of blocks. Either display vertically or horizontally.
@mixin flex-region-orientation($orientation: horizontal) {
    @if $orientation == vertical {
        flex-direction: column;
    } @else {
        flex-direction: row;
    }
}

// Set the wrapping of blocks within a region.
@mixin flex-region-wrap($wrap: true) {
    @if $wrap {
        flex-wrap: wrap;
        align-items: flex-start;
    } @else {
        flex-wrap: nowrap;
        align-items: stretch;
    }
}

// Set the width, grow, and shrink settings for a block.
@mixin flex-block($width: auto, $grow: 1, $shrink: 0) {
    flex: $grow $shrink $width;
}

// Override the blocks alignment set by the parent.
@mixin flex-block-align($align: left) {
    align-self: map-get($flex-align-map, $align);
}

// Set the order of a block. Defaults to 100 so that custom blocks can be set higher.
@mixin flex-block-order($order: 100) {
    order: $order;
}

// Set a block to grow by default.
@mixin flex-block-grow($width: auto) {
    @include flex-block($width);
}

// Set a block to shrink by default.
@mixin flex-block-shrink($width: auto) {
    @include flex-block($width, 0, 1);
}