Flex Partials, _flex-maker to live in mixins and _flex for components

_flex-maker.scss

@mixin flex-items($number) {
    @for $i from 1 through $number{
        .flex-#{$i}{
            flex: #{$i} 1 1%; 
        }
    }
    
}  


//@include flex-items($number: 12);

_flex.scss

@include flex-items($number: 12);
.flex-container {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    [class*="flex-"]{
        margin-right: 75px;
    }
     [class*="flex-"]:last-child{
        margin-right: 0;
    } 
   
}
 //styling specific for tablet
    @media only screen and (max-width: $screen-md)  {
        .flex-1.flex-sm-3{
            flex-basis:  33.3333%;
            margin-right: 0;
            margin-bottom: 45px;
           
        }
        .flex-1.flex-sm-6{
            flex-basis:  50%;
            margin-right: 0;
            margin-bottom: 45px;
           
        }
        .flex-1.flex-sm-9{
            flex-basis:  75%;
            margin-right: 0;
            margin-bottom: 45px;
           
        }
        .flex-1.flex-sm-12{
            flex-basis:  100%;
            margin-bottom: 45px;
        }
    }
//styling specific for mobile
    @media only screen and (max-width: $screen-sm)  {
        [class*="flex-"]{
            flex-basis: 100%;
            margin-bottom: 25px;
        }
        .flex-1.flex-xs-6{
            flex-basis:  50%;
            margin-bottom: 25px;
        }
        .flex-1.flex-xs-12{
            flex-basis: 100%;
            margin-bottom: 25px;
        }
        .flex-1.flex-sm-6{
            flex-basis:  50%;
            margin-right: 0;
            margin-bottom: 25px;
           
        }
    }
.mx-listview.flex-container ul.mx-list li.mx-listview-item .mx-dataview-content {
	display: flex;
    justify-content: space-between;
}
.mx-dataview.flex-container .mx-dataview-content {
	display: flex;
    justify-content: space-between;    
}