diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
index 6309537..8dd90c6 100644
--- a/docs/src/pages/ui-elements/Layout.vue
+++ b/docs/src/pages/ui-elements/Layout.vue
@@ -126,6 +126,18 @@
                 <md-table-cell><code>Number</code></md-table-cell>
                 <md-table-cell>Create a empty space before the actual child  on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-offset-small="20"</code></md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-align-{type}</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Apply an alignment to the container. Accepts <code>start</code>|<code>center</code>|<code>end</code> Example: <code>md-align="end"</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-align-{type}</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: <code>md-align-xlarge="center"</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -300,13 +312,13 @@
 
         <example-box card-title="Direction">
           <div class="layout-demo grid" slot="demo">
-            <md-layout class="column-size" md-gutter>
-              <md-layout md-column md-gutter class="color">
+            <md-layout class="column-size" md-gutter="16">
+              <md-layout md-column md-gutter="16" class="color">
                 <md-layout md-flex="20"></md-layout>
                 <md-layout></md-layout>
               </md-layout>
 
-              <md-layout md-column md-gutter class="color">
+              <md-layout md-column md-gutter="16" class="color">
                 <md-layout md-flex="50"></md-layout>
                 <md-layout></md-layout>
                 <md-layout></md-layout>
@@ -332,6 +344,78 @@
           </div>
         </example-box>
 
+        <example-box card-title="Alignment">
+          <div class="layout-demo grid gutter" slot="demo">
+            <md-layout md-gutter="16" class="color">
+              <md-layout md-flex="50">
+                <span>start</span>
+              </md-layout>
+            </md-layout>
+
+            <md-layout md-align="end" md-gutter="16" class="color">
+              <md-layout md-flex="33">
+                <span>end</span>
+              </md-layout>
+            </md-layout>
+
+            <md-layout md-align="end" md-gutter="16" class="color">
+              <md-layout md-flex="20">
+                <span>end</span>
+              </md-layout>
+
+              <md-layout md-flex="20">
+                <span>end</span>
+              </md-layout>
+            </md-layout>
+
+            <md-layout md-align="center" md-gutter="16" class="color">
+              <md-layout md-flex="35">
+                <span>center</span>
+              </md-layout>
+
+              <md-layout md-flex="35">
+                <span>center</span>
+              </md-layout>
+            </md-layout>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-layout md-gutter=&quot;16&quot;&gt;
+                &lt;md-layout md-flex=&quot;50&quot;&gt;
+                  &lt;span&gt;start&lt;/span&gt;
+                &lt;/md-layout&gt;
+              &lt;/md-layout&gt;
+
+              &lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
+                &lt;md-layout md-flex=&quot;33&quot;&gt;
+                  &lt;span&gt;end&lt;/span&gt;
+                &lt;/md-layout&gt;
+              &lt;/md-layout&gt;
+
+              &lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
+                &lt;md-layout md-flex=&quot;20&quot;&gt;
+                  &lt;span&gt;end&lt;/span&gt;
+                &lt;/md-layout&gt;
+
+                &lt;md-layout md-flex=&quot;20&quot;&gt;
+                  &lt;span&gt;end&lt;/span&gt;
+                &lt;/md-layout&gt;
+              &lt;/md-layout&gt;
+
+              &lt;md-layout md-align=&quot;center&quot; md-gutter=&quot;16&quot;&gt;
+                &lt;md-layout md-flex=&quot;35&quot;&gt;
+                  &lt;span&gt;center&lt;/span&gt;
+                &lt;/md-layout&gt;
+
+                &lt;md-layout md-flex=&quot;35&quot;&gt;
+                  &lt;span&gt;center&lt;/span&gt;
+                &lt;/md-layout&gt;
+              &lt;/md-layout&gt;
+            </code-block>
+          </div>
+        </example-box>
+
         <example-box card-title="Gutters">
           <div class="layout-demo grid gutter" slot="demo">
             <md-layout class="no-gutter color">
@@ -419,7 +503,7 @@
               </md-layout>
             </md-layout>
 
-            <md-layout md-gutter class="color">
+            <md-layout :md-gutter="true" class="color">
               <md-layout>
                 <span>Automatic</span>
               </md-layout>
diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss
index 5e48a6f..0ac3f36 100644
--- a/src/components/mdLayout/mdLayout.scss
+++ b/src/components/mdLayout/mdLayout.scss
@@ -44,6 +44,33 @@
 }
 
 
+/* Alignments */
+
+@mixin layout-align($size: null) {
+  @if $size == null {
+    $size : '';
+  }
+
+  @if $size != '' {
+    $size : '-#{$size}';
+  }
+
+  .md-align#{$size}-start {
+    justify-content: flex-start;
+  }
+
+  .md-align#{$size}-center {
+    justify-content: center;
+  }
+
+  .md-align#{$size}-end {
+    justify-content: flex-end;
+  }
+}
+
+@include layout-align();
+
+
 /* Gutter Size */
 
 @mixin layout-gutter($margin: -12px, $padding: 12px) {
@@ -143,6 +170,7 @@ $sizes: (8, 16, 24, 40);
 @mixin breakpoint-layout($size) {
   @include layout($size);
   @include layout-flex($size);
+  @include layout-align($size);
 
   .md-hide-#{$size} {
     display: none;
diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue
index 098266c..cef20ac 100644
--- a/src/components/mdLayout/mdLayout.vue
+++ b/src/components/mdLayout/mdLayout.vue
@@ -25,13 +25,24 @@
       mdHideLarge: Boolean,
       mdHideXlarge: Boolean,
       mdGutter: [String, Number, Boolean],
+      mdAlign: String,
+      mdAlignXsmall: String,
+      mdAlignSmall: String,
+      mdAlignMedium: String,
+      mdAlignLarge: String,
+      mdAlignXlarge: String,
       mdFlex: [String, Number, Boolean],
       mdFlexXsmall: [String, Number, Boolean],
       mdFlexSmall: [String, Number, Boolean],
       mdFlexMedium: [String, Number, Boolean],
       mdFlexLarge: [String, Number, Boolean],
       mdFlexXlarge: [String, Number, Boolean],
-      mdFlexOffset: [String, Number]
+      mdFlexOffset: [String, Number, Boolean],
+      mdFlexOffsetXsmall: [String, Number, Boolean],
+      mdFlexOffsetSmall: [String, Number, Boolean],
+      mdFlexOffsetMedium: [String, Number, Boolean],
+      mdFlexOffsetLarge: [String, Number, Boolean],
+      mdFlexOffsetXlarge: [String, Number, Boolean]
     },
     computed: {
       classes() {
@@ -63,31 +74,44 @@
           }
         }
 
-        if (this.mdFlexOffset) {
-          classes['md-flex-offset-' + this.mdFlexOffset] = true;
-        }
+        /* Flex */
+        this.generatePropClasses('md-flex', '', 'mdFlex', classes);
+        this.generatePropClasses('md-flex', 'xsmall', 'mdFlexXsmall', classes);
+        this.generatePropClasses('md-flex', 'small', 'mdFlexSmall', classes);
+        this.generatePropClasses('md-flex', 'medium', 'mdFlexMedium', classes);
+        this.generatePropClasses('md-flex', 'large', 'mdFlexLarge', classes);
+        this.generatePropClasses('md-flex', 'xlarge', 'mdFlexXlarge', classes);
 
-        this.generateFlexClasses('', '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);
+        /* Flex Offset */
+        this.generatePropClasses('md-flex-offset', '', 'mdFlexOffset', classes);
+        this.generatePropClasses('md-flex-offset', 'xsmall', 'mdFlexOffsetXsmall', classes);
+        this.generatePropClasses('md-flex-offset', 'small', 'mdFlexOffsetSmall', classes);
+        this.generatePropClasses('md-flex-offset', 'medium', 'mdFlexOffsetMedium', classes);
+        this.generatePropClasses('md-flex-offset', 'large', 'mdFlexOffsetLarge', classes);
+        this.generatePropClasses('md-flex-offset', 'xlarge', 'mdFlexOffsetXlarge', classes);
+
+        /* Alignment */
+        this.generatePropClasses('md-align', '', 'mdAlign', classes);
+        this.generatePropClasses('md-align', 'xsmall', 'mdAlignXsmall', classes);
+        this.generatePropClasses('md-align', 'small', 'mdAlignSmall', classes);
+        this.generatePropClasses('md-align', 'medium', 'mdAlignMedium', classes);
+        this.generatePropClasses('md-align', 'large', 'mdAlignLarge', classes);
+        this.generatePropClasses('md-align', 'xlarge', 'mdAlignXlarge', classes);
 
         return classes;
       }
     },
     methods: {
-      generateFlexClasses(size, name, object) {
+      generatePropClasses(prop, size, name, object) {
         if (size) {
           size = '-' + size;
         }
 
         if (this[name]) {
           if (typeof this[name] === 'boolean') {
-            object['md-flex' + size] = true;
+            object[prop + size] = true;
           } else {
-            object['md-flex' + size + '-' + this[name]] = true;
+            object[prop + size + '-' + this[name]] = true;
           }
         }
       }