diff --git a/src/lib/flexbox/api/base.ts b/src/lib/flexbox/api/base.ts
index efc1abd14..b1665cd1f 100644
--- a/src/lib/flexbox/api/base.ts
+++ b/src/lib/flexbox/api/base.ts
@@ -17,6 +17,7 @@ import {buildLayoutCSS} from '../../utils/layout-validator';
 import {ResponsiveActivation, KeyOptions} from '../responsive/responsive-activation';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {MediaQuerySubscriber} from '../../media-query/media-change';
+import {Node} from '@angular/compiler';
 
 
 /**
@@ -120,9 +121,16 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     let element: HTMLElement = source || this._elementRef.nativeElement;
     let value = this._lookupStyle(element, 'display');
 
-    return value ? value.trim() : ((element.nodeType === 1) ? 'block' : 'inline-block');
+    return value ? value.trim() :
+        ((element.nodeType === 1) ? 'block' : 'inline-block');
   }
 
+  /**
+   * Determine the DOM element's Flexbox flow (flex-direction).
+   *
+   * Check inline style first then check computed (stylesheet) style.
+   * And optionally add the flow value to element's inline style.
+   */
   protected _getFlowDirection(target: any, addIfMissing = false): string {
     let value = 'row';
 
@@ -146,7 +154,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     try {
       if (element) {
         let immediateValue = getDom().getStyle(element, styleName);
-        value = immediateValue || getDom().getComputedStyle(element).display;
+        value = immediateValue || getDom().getComputedStyle(element).getPropertyValue(styleName);
       }
     } catch (e) {
       // TODO: platform-server throws an exception for getComputedStyle
diff --git a/src/lib/flexbox/api/flex.spec.ts b/src/lib/flexbox/api/flex.spec.ts
index 8307e763c..99d68e3da 100644
--- a/src/lib/flexbox/api/flex.spec.ts
+++ b/src/lib/flexbox/api/flex.spec.ts
@@ -118,6 +118,26 @@ describe('flex directive', () => {
       expect(element).not.toHaveCssStyle({'min-width': '30px'});
     });
 
+    it('should CSS stylesheet and not inject flex-direction on parent', () => {
+      componentWithTemplate(`
+        <style>
+          .test { flex-direction:column; display: flex; }
+        </style>
+        <div class='test'>
+          <div fxFlex='30px' fxFlex.gt-sm='50'  >  </div>
+        </div>
+      `);
+
+      fixture.detectChanges();
+      let parent = queryFor(fixture, '.test')[0].nativeElement;
+      let element = queryFor(fixture, '[fxFlex]')[0].nativeElement;
+
+      // parent flex-direction found with 'column' with child height styles
+      expect(parent).toHaveCssStyle({'flex-direction': 'column', 'display': 'flex'});
+      expect(element).toHaveCssStyle({'min-height': '30px'});
+      expect(element).not.toHaveCssStyle({'min-width': '30px'});
+    });
+
     it('should not work with non-direct-parent fxLayouts', async(() => {
       componentWithTemplate(`
         <div fxLayout='column'>
diff --git a/src/lib/flexbox/api/flex.ts b/src/lib/flexbox/api/flex.ts
index 721a92ac2..aedaa680a 100644
--- a/src/lib/flexbox/api/flex.ts
+++ b/src/lib/flexbox/api/flex.ts
@@ -77,10 +77,10 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
   @Input('fxFlex.lt-md') set flexLtMd(val) { this._cacheInput('flexLtMd', val); };
   @Input('fxFlex.lt-lg') set flexLtLg(val) { this._cacheInput('flexLtLg', val); };
   @Input('fxFlex.lt-xl') set flexLtXl(val) { this._cacheInput('flexLtXl', val); };
-
   /* tslint:enable */
-  // Explicitly @SkipSelf on LayoutDirective and LayoutWrapDirective because we want the
-  // parent flex container for this flex item.
+
+  // Note: Explicitly @SkipSelf on LayoutDirective and LayoutWrapDirective because we are looking
+  //       for the parent flex container for this flex item.
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
               renderer: Renderer,