This adds additional flex classes to the Atlas framework

_alignment-block.scss

.flexcontainer {
    display: flex;
    overflow: hidden;
    flex: 1;
    flex-direction: row;
    .flexitem {
        margin-right: $gutter-size;
        &:last-child {
            margin-right: 0;
        }
    }
    .flexitem-main {
        overflow: hidden;
        flex: 1;
    }
}

/// These classes define the primary axis and order of the flex items
.flex-row-reverse{
    flex-direction: row-reverse; 
}
.flex-col-reverse{ 
    flex-direction: column-reverse; 
}
.flex-col{
    flex-direction: column; 
}
/// This class allows items to wrap onto other lines
.flex-wrap{
    flex-wrap: wrap;
}

/// These classes define alignment along the main axis
.flex-align-start{
    justify-content: flex-start; 
}
.flex-align-end{
    justify-content: flex-end; 
}
.flex-align-center{
    justify-content: center; 
}
.flex-align-between{
    justify-content: space-between; 
}
.flex-align-around{
    justify-content: space-around; 
}
.flex-align-evenly{
    justify-content: space-evenly; 
}


/// These classes define alignment along the inverse axis
.flex-start {
    align-items: flex-start;
}
.flex-end {
    align-items: flex-end;
}
.flex-center {
    align-items: center;
}
.flex-stretch {
    align-items: stretch;
}
.flex-baseline {
    align-items: baseline;
}

/// These classes define alignment along the main axis for multiple lines
.flex-align-content-start{
    align-content: flex-start; 
}
.flex-align-content-end{
    align-content: flex-end; 
}
.flex-align-content-center{
    align-content: center; 
}
.flex-align-content-between{
    align-content: space-between;  
}
.flex-align-content-around{
    align-content: space-around; 
}

/// These classes allow the default alignment to be overridden for individual items
.flex-align-self-start{
    align-self: flex-start; 
}
.flex-align-self-end{
    align-self: flex-end; 
}
.flex-align-self-center{
    align-self: center;  
}
.flex-align-self-baseline{
    align-self: baseline;  
}
.flex-align-self-stretch{
    align-self: stretch; 
}


/// These classes define the percentage of available free space within a flex container a flex item will take.
@mixin flex-items($number) {
    @for $i from 1 through $number{
        .flexitem-#{$i}{
            flex: #{$i} #{$i} 1%;  
        }
    } 
} 
@include flex-items($number: 12);