diff --git a/src/lib/flexbox/api/flex.spec.ts b/src/lib/flexbox/api/flex.spec.ts
index e0a6e822a..e056fe3b3 100644
--- a/src/lib/flexbox/api/flex.spec.ts
+++ b/src/lib/flexbox/api/flex.spec.ts
@@ -305,6 +305,7 @@ describe('flex directive', () => {
         `)
             .not.toHaveCssStyle({
           'flex-direction': 'row',
+          'flex': '1 1 100%',
           'max-height': '37%',
         });
       });
@@ -318,18 +319,21 @@ describe('flex directive', () => {
 
         expectDomForQuery(template, "[fxFlex]")
             .toHaveCssStyle({
+              'flex': '1 1 100%',
               'max-height': '37%',
             });
       });
 
       it('should set max-width for `fxFlex="<%val>"`', () => {
         expectDOMFrom(`<div fxFlex="37%"></div>`).toHaveCssStyle({
+          'flex': '1 1 100%',
           'max-width': '37%',
         });
       });
 
       it('should set max-width for `fxFlex="2%"` usage', () => {
         expectDOMFrom(`<div fxFlex="2%"></div>`).toHaveCssStyle({
+          'flex': '1 1 100%',
           'max-width': '2%',
         });
       });
@@ -351,7 +355,7 @@ describe('flex directive', () => {
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveCssStyle({
-        'flex': '1 1 50%',
+        'flex': '1 1 100%',
         'max-width': '50%'
       });
 
@@ -359,7 +363,7 @@ describe('flex directive', () => {
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveCssStyle({
-        'flex': '1 1 33%',
+        'flex': '1 1 100%',
         'max-width': '33%'
       });
     });
diff --git a/src/lib/utils/auto-prefixer.spec.ts b/src/lib/utils/auto-prefixer.spec.ts
index 78e33591b..1800ac596 100644
--- a/src/lib/utils/auto-prefixer.spec.ts
+++ b/src/lib/utils/auto-prefixer.spec.ts
@@ -25,10 +25,14 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for display', () => {
       let input = {"display": "flex"};
       let actual = applyCssPrefixes(input);
+
       expect(Array.isArray(actual['display'])).toBeTruthy();
-      expect(actual['display'][0]).toEqual('-webkit-box');
-      expect(actual['display'][4]).toEqual('flex');
+
+      // `display:flex` should be last
+      expect(actual['display'][0]).toEqual('-webkit-flex');
+      expect(actual['display'][1]).toEqual('flex');
     });
+
   });
 
   /**
@@ -39,8 +43,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for single values', () => {
       let input = {"flex": "100"};
       let expected = extendObject({}, input, {
-        '-ms-flex': "100",
-        '-webkit-box-flex': "100"
+        '-webkit-flex': "100"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex", actual, expected);
@@ -49,8 +52,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for multiple values', () => {
       let input = {"flex": "2 1 50%"};
       let expected = extendObject({}, input, {
-        '-ms-flex': "2 1 50%",
-        '-webkit-box-flex': "2"
+        '-webkit-flex': "2 1 50%"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex", actual, expected);
@@ -66,9 +68,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "row"', () => {
       let input = {"flex-direction": "row"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "row",
-        '-webkit-box-orient': "horizontal",
-        '-webkit-box-direction': "normal"
+        '-webkit-flex-direction': "row"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -77,9 +77,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "row-reverse"', () => {
       let input = {"flex-direction": "row-reverse"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "row-reverse",
-        '-webkit-box-orient': "horizontal",
-        '-webkit-box-direction': "reverse"
+        '-webkit-flex-direction': "row-reverse"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -88,9 +86,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "column"', () => {
       let input = {"flex-direction": "column"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "column",
-        '-webkit-box-orient': "vertical",
-        '-webkit-box-direction': "normal"
+        '-webkit-flex-direction': "column"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -99,9 +95,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "column-reverse"', () => {
       let input = {"flex-direction": "column-reverse"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "column-reverse",
-        '-webkit-box-orient': "vertical",
-        '-webkit-box-direction': "reverse"
+        '-webkit-flex-direction': "column-reverse"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -117,7 +111,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"flex-wrap": "nowrap"};
       let expected = extendObject({}, input, {
-        "-ms-flex-wrap": "nowrap"
+        '-webkit-flex-wrap' : 'nowrap'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-wrap", actual, expected);
@@ -132,8 +126,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"order": "1"};
       let expected = extendObject({}, input, {
-        "-ms-flex-order": "1",
-        "-webkit-box-ordinal-group": "2"
+        '-webkit-order' : '1'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("order", actual, expected);
@@ -143,8 +136,7 @@ describe('auto-prefixer for ', () => {
       let input = {"order": "invalid"};
       let expected = extendObject({}, input, {
         "order": "0",
-        "-ms-flex-order": "0",
-        "-webkit-box-ordinal-group": "1"
+        '-webkit-order' : "0"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("order", actual, expected);
@@ -161,8 +153,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"justify-content": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-pack": "start",
-        "-webkit-box-pack": "start"
+        "-webkit-justify-content": "flex-start"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("justify-content", actual, expected);
@@ -171,8 +162,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"justify-content": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-pack": "end",
-        "-webkit-box-pack": "end"
+        "-webkit-justify-content": "flex-end"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("justify-content", actual, expected);
@@ -181,8 +171,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"justify-content": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-pack": "center",
-        "-webkit-box-pack": "center"
+        "-webkit-justify-content": "center"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("justify-content", actual, expected);
@@ -197,8 +186,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-items": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-align": "start",
-        "-webkit-box-align": "start"
+        "-webkit-align-items": "flex-start"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-items", actual, expected);
@@ -207,8 +195,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-items": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-align": "end",
-        "-webkit-box-align": "end"
+        "-webkit-align-items": "flex-end"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-items", actual, expected);
@@ -217,8 +204,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-items": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-align": "center",
-        "-webkit-box-align": "center"
+        "-webkit-align-items": "center"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-items", actual, expected);
@@ -236,7 +222,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-self": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-item-align": "start"
+        '-webkit-align-self' : 'flex-start'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-self", actual, expected);
@@ -245,7 +231,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-self": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-item-align": "end"
+        '-webkit-align-self' : 'flex-end'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-self", actual, expected);
@@ -254,7 +240,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-self": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-item-align": "center"
+        '-webkit-align-self' : 'center'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-self", actual, expected);
@@ -270,7 +256,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "start"
+        '-webkit-align-content': 'flex-start'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -279,7 +265,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "end"
+        '-webkit-align-content' : 'flex-end'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -288,7 +274,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "center"
+        '-webkit-align-content': 'center'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -297,7 +283,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "stretch"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "stretch"
+        '-webkit-align-content': 'stretch'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -310,50 +296,26 @@ describe('auto-prefixer for ', () => {
 /**
  * Internal checks to `expect().toEqual()`
  */
-function checkCssPrefix(iKey, actual, expected) {
-  expect(actual[iKey]).toEqual(expected[iKey]);
-  switch (iKey) {
+function checkCssPrefix(key, actual, expected) {
+  expect(actual[key]).toEqual(expected[key]);
+  switch (key) {
     case 'display':
-      expect(actual['display']).toEqual(expected[iKey]);
-      break;
-    case 'flex':
-      expect(actual['-ms-flex']).toEqual(expected['-ms-flex']);
-      expect(actual['-webkit-box-flex']).toEqual(expected['-webkit-box-flex'].split(" ")[0]);
-      break;
-
-    case 'flex-direction':
-      expect(actual['-ms-flex-direction']).toEqual(expected['-ms-flex-direction']);
-      expect(actual['-webkit-box-orient']).toEqual(expected['-webkit-box-orient']);
-      expect(actual['-webkit-box-direction']).toEqual(expected['-webkit-box-direction']);
-      break;
-
-    case 'flex-wrap':
-      expect(actual['-ms-flex-wrap']).toEqual(expected['-ms-flex-wrap']);
-      break;
-
-    case 'order':
-      expect(actual['-ms-flex-order']).toEqual(expected['-ms-flex-order']);
-      expect(actual['-webkit-box-ordinal-group']).toEqual(expected['-webkit-box-ordinal-group']);
-      break;
-
-    case 'justify-content':
-      expect(actual['-ms-flex-pack']).toEqual(expected['-ms-flex-pack']);
-      expect(actual['-webkit-box-pack']).toEqual(expected['-webkit-box-pack']);
+      expect(actual['display']).toEqual(expected[key]);
       break;
 
     case 'align-items':
-      expect(actual['-ms-flex-align']).toEqual(expected['-ms-flex-align']);
-      expect(actual['-webkit-box-align']).toEqual(expected['-webkit-box-align']);
-      break;
-
     case 'align-self':
-      expect(actual['-ms-flex-item-align']).toEqual(expected['-ms-flex-item-align']);
-      break;
-
     case 'align-content':
-      expect(actual['-ms-flex-line-pack']).toEqual(expected['-ms-flex-line-pack']);
+    case 'flex':
+    case 'flex-direction':
+    case 'flex-wrap':
+    case 'flex-grow':
+    case 'flex-shrink':
+    case 'flex-basis':
+    case 'flex-flow':
+    case 'justify-content':
+    case 'order':
+      expect(actual[key]).toEqual(expected['-webkit-' + key]);
       break;
-
-
   }
 }
diff --git a/src/lib/utils/auto-prefixer.ts b/src/lib/utils/auto-prefixer.ts
index 54f47db02..b67eec25c 100644
--- a/src/lib/utils/auto-prefixer.ts
+++ b/src/lib/utils/auto-prefixer.ts
@@ -6,27 +6,31 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-/** Applies CSS prefixes to appropriate style keys.*/
+/**
+ * Applies CSS prefixes to appropriate style keys.
+ *
+ * Note: `-ms-`, `-moz` and `-webkit-box` are no longer supported. e.g.
+ *    {
+ *      display: -webkit-flex;     NEW - Safari 6.1+. iOS 7.1+, BB10
+ *      display: flex;             NEW, Spec - Firefox, Chrome, Opera
+ *      // display: -webkit-box;   OLD - iOS 6-, Safari 3.1-6, BB7
+ *      // display: -ms-flexbox;   TWEENER - IE 10
+ *      // display: -moz-flexbox;  OLD - Firefox
+ *    }
+ */
 export function applyCssPrefixes(target) {
   for (let key in target) {
-
-    let value = target[key];
+    let value = target[key] || "";
 
     switch (key) {
       case 'display':
         if (value === 'flex') {
           target['display'] = [
-            '-webkit-box',
-            '-moz-box',
-            '-ms-flexbox',
             '-webkit-flex',
             'flex'
           ];
         } else if (value === 'inline-flex') {
           target['display'] = [
-            '-webkit-inline-box',
-            '-moz-inline-box',
-            '-ms-inline-flexbox',
             '-webkit-inline-flex',
             'inline-flex'
           ];
@@ -35,114 +39,29 @@ export function applyCssPrefixes(target) {
         }
         break;
 
+      case 'align-items':
+      case 'align-self':
+      case 'align-content':
       case 'flex':
-        target['-ms-flex'] = value;
-        target['-webkit-flex'] = value;
-        target['-webkit-box-flex'] = value.split(" ")[0];
-        target['-moz-box-flex'] = value.split(" ")[0];
+      case 'flex-basis':
+      case 'flex-flow':
+      case 'flex-grow':
+      case 'flex-shrink':
+      case 'flex-wrap':
+      case 'justify-content':
+        target['-webkit-' + key] = value;
         break;
 
       case 'flex-direction':
         value = value || "row";
-        target['flex-direction'] = value;
-        target['-ms-flex-direction'] = value;
         target['-webkit-flex-direction'] = value;
-        target['-webkit-box-orient'] = toBoxOrient(value);
-        target['-moz-box-orient'] = toBoxOrient(value);
-        target['-webkit-box-direction'] = toBoxDirection(value);
-        target['-moz-box-direction'] = toBoxDirection(value);
-        break;
-
-      case 'flex-wrap':
-        target['-ms-flex-wrap'] = value;
-        target['-webkit-flex-wrap'] = value;
-        break;
-
-      case 'flex-grow':
-        target['-webkit-flex-grow'] = value;
-        break;
-
-      case 'flex-shrink':
-        target['-webkit-flex-shrink'] = value;
-        break;
-
-      case 'flex-basis':
-        target['-webkit-flex-basis'] = value;
-        break;
-
-      case 'flex-flow':
-        target['-webkit-flex-flow'] = value;
+        target['flex-direction'] = value;
         break;
 
       case 'order':
-        if (isNaN(value)) {
-          value = "0";
-        }
-        target['order'] = value;
-        target['-webkit-order'] = value;
-        target['-ms-flex-order'] = value;
-        target['-moz-box-ordinal-group'] = toBoxOrdinal(value);
-        target['-webkit-box-ordinal-group'] = toBoxOrdinal(value);
-        break;
-
-      case 'justify-content':
-        target['-ms-flex-pack'] = toBoxValue(value);
-        target['-webkit-box-pack'] = toBoxValue(value);
-        target['-moz-box-pack'] = toBoxValue(value);
-        target['-webkit-justify-content'] = value;
-        break;
-
-      case 'align-items':
-        target['-ms-flex-align'] = toBoxValue(value);
-        target['-webkit-box-align'] = toBoxValue(value);
-        target['-moz-box-align'] = toBoxValue(value);
-        target['-webkit-align-items'] = toBoxValue(value);
-        break;
-
-      case 'align-self':
-        target['-ms-flex-item-align'] = toBoxValue(value);
-        target['-webkit-align-self'] = value;
-        break;
-
-      case 'align-content':
-        target['-ms-align-content'] = toAlignContentValue(value);
-        target['-ms-flex-line-pack'] = toAlignContentValue(value);
-        target['-webkit-align-content'] = value;
+        target['order'] = target['-webkit-' + key] = isNaN(value) ? '0' : value;
         break;
     }
   }
   return target;
 }
-
-export function toAlignContentValue(value: string) {
-  switch (value) {
-    case "space-between" :
-      return "justify";
-    case "space-around"  :
-      return "distribute";
-    default :
-      return toBoxValue(value);
-  }
-}
-
-/** Convert flex values flex-start, flex-end to start, end. */
-export function toBoxValue(value = "") {
-  return (value == 'flex-start') ? 'start' : ((value == 'flex-end') ? 'end' : value);
-}
-
-/** Convert flex Direction to Box orientations */
-export function toBoxOrient(flexDirection = 'row') {
-  return flexDirection.indexOf('column') === -1 ? 'horizontal' : 'vertical';
-}
-
-/** Convert flex Direction to Box direction type */
-export function toBoxDirection(flexDirection = 'row') {
-
-  return flexDirection.indexOf('reverse') !== -1 ? 'reverse' : 'normal';
-}
-
-/** Convert flex order to Box ordinal group */
-export function toBoxOrdinal(order = '0') {
-  let value = order ? Number(order) + 1 : 1;
-  return isNaN(value) ? "0" : value.toString();
-}