Cacher is the code snippet organizer for pro developers

.flex {
    .flexbox & .flex {
      display: inline-flex;
      width: 100%;
    }
    .flexbox & {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        &:after, &:before {
            display: none;
        }

        > .flex-item {
            flex: 1 1 0%;
            max-width: 100%;
            width: auto;
        }

        &.flex-stretch {
            align-items: stretch;
        }

        &.flex-start {
            align-items: flex-start;
        }
        
        .loop-flex-grid-columns(@index, @class) when (@index >= 0) {
            .calc-flex-grid-column(@index, @class);
            .loop-flex-grid-columns((@index - 1), @class);
        }
        .calc-flex-grid-column(@index, @class) when (@index > 0) {
            > .col-@{class}-@{index} {
                @width: percentage((@index / @grid-columns));
                flex: 0 0 @width;
                float: none;
                min-width: 1px;
                order: 0;
            }
        }
        
        .loop-flex-grid-columns(@grid-columns, xs);
        @media (min-width: @screen-sm-min) {
            .loop-flex-grid-columns(@grid-columns, sm);
        }
        @media (min-width: @screen-md-min) {
            .loop-flex-grid-columns(@grid-columns, md);
        }
        @media (min-width: @screen-lg-min) {
            .loop-flex-grid-columns(@grid-columns, lg);
        }
        
        > .col-first {
          order: -1
        }
        
        > .col-last {
          order: 1;
        }
        
        &.vertical-middle {
          align-items: center;
        }
        
        &.flex-center {
          justify-content: center;
        }
    }
}

.do-flex() {
    .flex;
}

/**
 * First, make sure you're importing bootstraps normal grid system. Then include
 * this file AFTER bootstrap. 
 * You MUST use autoprefixer during compile time to be cross-browser compat.
 *
 * The .flex class can only be used on the bootstrap .row class. The .row.flex 
 * element should only container bootstrap columns. The columns can contain 
 * whatever you want, but don't have anything as a direct decendant of the 
 * .row.flex that is not a bootstrap column or shit begets cray cray. 
 */
.flex {
    // Flex inception causes issues in IE. inner flex containers must be inline-flex
    .flexbox & .flex {
      display: inline-flex;
      width: 100%;
    }
    // .flexbox is a Modernizr class added to the html element. Be sure you are loading modernizer
    .flexbox & {
        display: flex;
        flex-wrap: wrap; // flex items should wrap to new lines
        max-width: 100%; // flex container should never expandto fit items
        
        // clearfix causes major issues in some browsers.
        &:after, &:before {
            display: none;
        }

        > .flex-item {
            flex: 1 1 0%;
            max-width: 100%;
            width: auto;
        }

        &.flex-stretch {
            align-items: stretch;
        }
        
        // simple less loop for iterating all calumn sizes
        .loop-flex-grid-columns(@index, @class) when (@index >= 0) {
            .calc-flex-grid-column(@index, @class);
            // next iteration
            .loop-flex-grid-columns((@index - 1), @class);
        }

        // set properties for each flex item.
        .calc-flex-grid-column(@index, @class) when (@index > 0) {
            // e.g. .col-xs-12
            .col-@{class}-@{index} {
                @width: percentage((@index / @grid-columns));
                flex: 0 0 @width; // no shrink or grow
                float: none; // float causes issues in chrome
                min-width: 1px; // firefox flexbugs: https://github.com/philipwalton/flexbugs/issues/41
                order: 0;
            }
        }
        
        // create the grids for each media query
        .loop-flex-grid-columns(@grid-columns, xs);
        @media (min-width: @screen-sm-min) {
            .loop-flex-grid-columns(@grid-columns, sm);
        }
        @media (min-width: @screen-md-min) {
            .loop-flex-grid-columns(@grid-columns, md);
        }
        @media (min-width: @screen-lg-min) {
            .loop-flex-grid-columns(@grid-columns, lg);
        }
        
        /* some simple utility classes for the individual flex items */
        
        // push this item to the left
        .col-first {
          order: -1
        }
        // push this item to the right
        .col-last {
          order: 1;
        }
        
        
        /* some simple utility classes for the .flex.row container */
        
        // similar to vertical-align: middle in table cells. 
        .vertical-middle {
          align-items: center;
        }
        
        // similar to text-align: center or margin: 0 auto;
        .flex-center {
          justify-content: center;
        }
    }
}