generate initial flex classes

src/components/mdLayout/mdLayout.scss

@@ -48,26 +48,38 @@ $sizes: (8, 16, 24, 40);
 
 /* Flex Size */
 
-.md-flex {
-  flex: 1;
-}
+@mixin layout-flex($size: null) {
+  @if $size == null {
+    $size : '';
+  }
 
-.md-flex-33 {
-  flex: 0 1 33.33333%;
-}
+  @if $size != '' {
+    $size : '-#{$size}';
+  }
 
-.md-flex-66 {
-  flex: 0 1 66.66666%;
-}
+  .md-flex#{$size} {
+    flex: 1;
+  }
 
-@for $i from 0 through 20 {
-  $counter: $i * 5;
+  .md-flex#{$size}-33 {
+    flex: 0 1 33.33333%;
+  }
 
-  .md-flex-#{$counter} {
-    flex: 0 1 #{$counter + '%'};
+  .md-flex#{$size}-66 {
+    flex: 0 1 66.66666%;
+  }
+
+  @for $i from 0 through 20 {
+    $counter: $i * 5;
+
+    .md-flex#{$size}-#{$counter} {
+      flex: 0 1 #{$counter + '%'};
+    }
   }
 }
 
+@include layout-flex();
+
 
 /* Responsive Breakpoints */
 
@@ -83,25 +95,26 @@ $sizes: (8, 16, 24, 40);
   .md-hide-#{$size} {
     display: none;
   }
-}
 
-@include layout-xsmall {
-  @include breakpoint-layout(xsmall);
-}
-
-@include layout-small {
-  @include breakpoint-layout(small);
-}
-
-@include layout-medium {
-  @include breakpoint-layout(medium);
-}
-
-@include layout-large {
-  @include breakpoint-layout(large);
+  @include layout-flex($size);
 }
 
 @include layout-xlarge {
   @include breakpoint-layout(xlarge);
 }
 
+@include layout-large {
+  @include breakpoint-layout(large);
+}
+
+@include layout-medium {
+  @include breakpoint-layout(medium);
+}
+
+@include layout-small {
+  @include breakpoint-layout(small);
+}
+
+@include layout-xsmall {
+  @include breakpoint-layout(xsmall);
+}

src/components/mdLayout/mdLayout.vue

@@ -25,7 +25,12 @@
       mdHideLarge: Boolean,
       mdHideXlarge: Boolean,
       mdGutter: [Number, Boolean],
-      mdFlex: [Number, Boolean]
+      mdFlex: [Number, Boolean],
+      mdFlexXsmall: Number,
+      mdFlexSmall: Number,
+      mdFlexMedium: Number,
+      mdFlexLarge: Number,
+      mdFlexXlarge: Number
     },
     computed: {
       classes() {
@@ -46,7 +51,12 @@
           'md-hide-small': this.mdHideSmall,
           'md-hide-medium': this.mdHideMedium,
           'md-hide-large': this.mdHideLarge,
-          'md-hide-xlarge': this.mdHideXlarge
+          'md-hide-xlarge': this.mdHideXlarge,
+          'md-flex-xsmall': this.mdFlexXsmall,
+          'md-flex-small': this.mdFlexSmall,
+          'md-flex-medium': this.mdFlexMedium,
+          'md-flex-large': this.mdFlexLarge,
+          'md-flex-xlarge': this.mdFlexXlarge
         };
 
         if (this.mdGutter) {
@@ -57,17 +67,31 @@
           }
         }
 
-        if (this.mdFlex) {
-          if (typeof this.mdFlex === 'boolean') {
-            classes['md-flex'] = true;
-          } else {
-            classes['md-flex-' + this.mdFlex] = true;
-          }
-        }
+        this.generateFlexClasses(null, 'mdFlex', classes);
+        this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
+        this.generateFlexClasses('small', 'mdFlexSmall', classes);
+        this.generateFlexClasses('medium', 'mdFlexMedium', classes);
+        this.generateFlexClasses('large', 'mdFlexLarge', classes);
+        this.generateFlexClasses('xlarge', 'mdFlexXlarge', classes);
 
         return classes;
       }
     },
+    methods: {
+      generateFlexClasses(size, name, object) {
+        if (size) {
+          size = '-' + size;
+        }
+
+        if (this[name]) {
+          if (typeof this[name] === 'boolean') {
+            object['md-flex' + size] = true;
+          } else {
+            object['md-flex-' + size + this[name]] = true;
+          }
+        }
+      }
+    },
     render(createElement) {
       return createElement(this.mdTag, {
         staticClass: 'md-layout',