diff --git a/docs/app/partials/layout-grid.tmpl.html b/docs/app/partials/layout-grid.tmpl.html
index 90d0fc33ff0..b52d1b0086c 100644
--- a/docs/app/partials/layout-grid.tmpl.html
+++ b/docs/app/partials/layout-grid.tmpl.html
@@ -2,7 +2,7 @@
 
   <p>
     To customize the size and position of elements in a layout, use the
-    <code>flex</code>, <code>flex-order</code>, and <code>offset</code> attributes.
+    <code>flex</code>, <code>flex-order</code>, and <code>flex-offset</code> attributes.
   </p>
 
   <docs-demo demo-title="Flex Attribute" class="small-demo colorNested">
@@ -189,7 +189,7 @@
   <docs-demo demo-title="Flex Offset Attribute" class="small-demo colorNested">
     <demo-file name="index.html">
       <div layout="row">
-        <div flex offset="33">
+        <div flex flex-offset="33">
           [flex offset="33"]
         </div>
         <div flex>
@@ -199,37 +199,37 @@
     </demo-file>
   </docs-demo>
   <p>
-    Add the <code>offset</code> attribute to a layout child to set its
+    Add the <code>flex-offset</code> attribute to a layout child to set its
     offset percentage within the layout. Values must be multiples 
     of <code>5</code>, or <code>33</code>, <code>34</code>, <code>66</code>, <code>67</code>.
   </p>
   <table class="md-api-table">
     <tr>
-      <td>offset</td>
+      <td>flex-offset</td>
       <td>Sets element offset.</td>
     </tr>
     <tr>
-      <td>offset-sm</td>
+      <td>flex-offset-sm</td>
       <td>Sets element offset on devices less than 600px wide.</td>
     </tr>
     <tr>
-      <td>offset-gt-sm</td>
+      <td>flex-offset-gt-sm</td>
       <td>Sets element offset on devices greater than 600px wide.</td>
     </tr>
     <tr>
-      <td>offset-md</td>
+      <td>flex-offset-md</td>
       <td>Sets element offset on devices between 600px and 960px wide.</td>
     </tr>
     <tr>
-      <td>offset-gt-md</td>
+      <td>flex-offset-gt-md</td>
       <td>Sets element offset on devices greater than 960px wide.
     </tr>
     <tr>
-      <td>offset-lg</td>
+      <td>flex-offset-lg</td>
       <td>Sets element offset on devices between 960px and 1200px wide.</td>
     </tr>
     <tr>
-      <td>offset-gt-lg</td>
+      <td>flex-offset-gt-lg</td>
       <td>Sets element offset on devices greater than 1200px wide.</td>
     </tr>
   </table>
diff --git a/src/core/services/layout/layout.attributes.scss b/src/core/services/layout/layout.attributes.scss
index bfe0b690b28..42f337dc4ff 100644
--- a/src/core/services/layout/layout.attributes.scss
+++ b/src/core/services/layout/layout.attributes.scss
@@ -56,7 +56,7 @@
       @if $s != '' { $suffix : '-#{$s}="#{$i * 5}"'; }
       @else        { $suffix : '="#{$i * 5}"';       }
 
-      $offsets : $offsets + '[offset#{$suffix}], ';
+      $offsets : $offsets + '[flex-offset#{$suffix}], ';
     }
 
     #{$offsets} {
@@ -72,7 +72,7 @@
       @if $s != '' {  $suffix : '-#{$s}="#{$i}"';   }
       @else        {  $suffix : '="#{$i}"';         }
 
-      $offsets : '[offset#{$suffix}], ';
+      $offsets : '[flex-offset#{$suffix}], ';
     }
 
     #{$offsets} {
@@ -88,7 +88,7 @@
       @if $s != '' {  $suffix : '-#{$s}="#{$i}"';   }
       @else        {  $suffix : '="#{$i}"';         }
 
-      $offsets : '[offset#{$suffix}]';
+      $offsets : '[flex-offset#{$suffix}]';
     }
 
     #{$offsets} {
diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
index 7551bfffd6c..96a5b3d3217 100644
--- a/src/core/services/layout/layout.js
+++ b/src/core/services/layout/layout.js
@@ -106,20 +106,20 @@
     .directive('flexOrderLg', attributeWithObserve('flex-order-lg'))
     .directive('flexOrderGtLg', attributeWithObserve('flex-order-gt-lg'))
 
-    .directive('offset', attributeWithObserve('layout-offset'))
-    .directive('offsetSm', attributeWithObserve('layout-offset-sm'))
-    .directive('offsetGtSm', attributeWithObserve('layout-offset-gt-sm'))
-    .directive('offsetMd', attributeWithObserve('layout-offset-md'))
-    .directive('offsetGtMd', attributeWithObserve('layout-offset-gt-md'))
-    .directive('offsetLg', attributeWithObserve('layout-offset-lg'))
-    .directive('offsetGtLg', attributeWithObserve('layout-offset-gt-lg'))
-    .directive('layoutOffset', attributeWithObserve('layout-offset'))
-    .directive('layoutOffsetSm', attributeWithObserve('layout-offset-sm'))
-    .directive('layoutOffsetGtSm', attributeWithObserve('layout-offset-gt-sm'))
-    .directive('layoutOffsetMd', attributeWithObserve('layout-offset-md'))
-    .directive('layoutOffsetGtMd', attributeWithObserve('layout-offset-gt-md'))
-    .directive('layoutOffsetLg', attributeWithObserve('layout-offset-lg'))
-    .directive('layoutOffsetGtLg', attributeWithObserve('layout-offset-gt-lg'))
+    .directive('offset', attributeWithObserve('flex-offset'))
+    .directive('offsetSm', attributeWithObserve('flex-offset-sm'))
+    .directive('offsetGtSm', attributeWithObserve('flex-offset-gt-sm'))
+    .directive('offsetMd', attributeWithObserve('flex-offset-md'))
+    .directive('offsetGtMd', attributeWithObserve('flex-offset-gt-md'))
+    .directive('offsetLg', attributeWithObserve('flex-offset-lg'))
+    .directive('offsetGtLg', attributeWithObserve('flex-offset-gt-lg'))
+    .directive('flexOffset', attributeWithObserve('flex-offset'))
+    .directive('flexOffsetSm', attributeWithObserve('flex-offset-sm'))
+    .directive('flexOffsetGtSm', attributeWithObserve('flex-offset-gt-sm'))
+    .directive('flexOffsetMd', attributeWithObserve('flex-offset-md'))
+    .directive('flexOffsetGtMd', attributeWithObserve('flex-offset-gt-md'))
+    .directive('flexOffsetLg', attributeWithObserve('flex-offset-lg'))
+    .directive('flexOffsetGtLg', attributeWithObserve('flex-offset-gt-lg'))
 
     .directive('layoutAlign', attributeWithObserve('layout-align'))
     .directive('layoutAlignSm', attributeWithObserve('layout-align-sm'))
@@ -165,8 +165,8 @@
     .directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))
     .directive('flexOrderLtMd', warnAttrNotSupported('flex-order-lt-md'))
     .directive('flexOrderLtLg', warnAttrNotSupported('flex-order-lt-lg'))
-    .directive('offsetLtMd', warnAttrNotSupported('layout-offset-lt-md'))
-    .directive('offsetLtLg', warnAttrNotSupported('layout-offset-lt-lg'))
+    .directive('offsetLtMd', warnAttrNotSupported('flex-offset-lt-md'))
+    .directive('offsetLtLg', warnAttrNotSupported('flex-offset-lt-lg'))
 
     .directive('hideLtMd', warnAttrNotSupported('hide-lt-md'))
     .directive('hideLtLg', warnAttrNotSupported('hide-lt-lg'))
@@ -371,7 +371,7 @@
           }
           break;
 
-        case 'layout-offset' :
+        case 'flex-offset' :
         case 'flex-order'    :
           if (!value || isNaN(+value)) {
             value = '0';
diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss
index 7b6a2d17250..4bdaa968415 100644
--- a/src/core/services/layout/layout.scss
+++ b/src/core/services/layout/layout.scss
@@ -56,7 +56,7 @@
       @if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
       @else        { $suffix : '#{$i * 5}';       }
 
-      $offsets : '.offset-#{$suffix}';
+      $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}';
     }
 
     #{$offsets} {
@@ -72,7 +72,7 @@
       @if $s != '' {  $suffix : '#{$s}-#{$i}';   }
       @else        {  $suffix : '#{$i}';         }
 
-      $offsets : '.offset-#{$suffix} ';
+      $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
     }
 
     #{$offsets} {
@@ -88,7 +88,7 @@
       @if $s != '' {  $suffix : '#{$s}-#{$i}';   }
       @else        {  $suffix : '#{$i}';         }
 
-      $offsets : '.offset-#{$suffix} ';
+      $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
     }
 
     #{$offsets} {
diff --git a/src/core/services/layout/layout.spec.js b/src/core/services/layout/layout.spec.js
index 105172eb48a..6fc3981c6ad 100644
--- a/src/core/services/layout/layout.spec.js
+++ b/src/core/services/layout/layout.spec.js
@@ -141,7 +141,7 @@ describe('layout directives', function() {
     testAllSuffixesWithValues("flex-order", flexOrderValues);
   });
 
-  describe('using [layout-offset] attributes', function() {
+  describe('using [flex-offset] attributes', function() {
     var offsetValues = [
       5, 10, 15, 20, 25,
       30, 35, 40, 45, 50,
@@ -150,27 +150,27 @@ describe('layout directives', function() {
       33, 34, 66, 67
     ];
 
-    it('should support attribute without value "<div layout-offset>"', function() {
-      var element = $compile('<div layout-offset>Layout</div>')(pageScope);
-      expect(element.hasClass("layout-offset-0")).toBeTruthy();
-      expect(element.hasClass("layout-offset")).toBeFalsy();
+    it('should support attribute without value "<div flex-offset>"', function() {
+      var element = $compile('<div flex-offset>Layout</div>')(pageScope);
+      expect(element.hasClass("flex-offset-0")).toBeTruthy();
+      expect(element.hasClass("flex-offset")).toBeFalsy();
     });
 
-    it('should ignore invalid values non-numericals like layout-offset="humpty"', function() {
-      var element = $compile('<div layout-offset="humpty">Layout</div>')(pageScope);
-      expect(element.hasClass("layout-offset-0")).toBeTruthy();
-      expect(element.hasClass('layout-offset-humpty')).toBeFalsy();
+    it('should ignore invalid values non-numericals like flex-offset="humpty"', function() {
+      var element = $compile('<div flex-offset="humpty">Layout</div>')(pageScope);
+      expect(element.hasClass("flex-offset-0")).toBeTruthy();
+      expect(element.hasClass('flex-offset-humpty')).toBeFalsy();
     });
 
-    it('should support interpolated values layout-offset-gt-sm="{{padding}}"', function() {
+    it('should support interpolated values flex-offset-gt-sm="{{padding}}"', function() {
       var scope = pageScope,
-        element = $compile('<div layout-offset-gt-sm="{{padding}}">Layout</div>')(scope);
+        element = $compile('<div flex-offset-gt-sm="{{padding}}">Layout</div>')(scope);
 
       scope.$apply('padding = 15');
-      expect(element.hasClass('layout-offset-gt-sm-15')).toBeTruthy();
+      expect(element.hasClass('flex-offset-gt-sm-15')).toBeTruthy();
     });
 
-    testAllSuffixesWithValues("layout-offset", offsetValues);
+    testAllSuffixesWithValues("flex-offset", offsetValues);
   });
 
   describe('using [layout-align] attributes', function() {
@@ -267,7 +267,7 @@ describe('layout directives', function() {
   }
 
   /**
-   * Test other Layout directives (e.g. flex, flex-order, layout-offset)
+   * Test other Layout directives (e.g. flex, flex-order, flex-offset)
    */
   function testWithValue(className, value, raw) {
     var title = 'should allow valid values `' + className + '=' + value + '`';