diff --git a/src/lib/flex/flex/flex.ts b/src/lib/flex/flex/flex.ts
index 3197d1bd6..e91f949d7 100644
--- a/src/lib/flex/flex/flex.ts
+++ b/src/lib/flex/flex/flex.ts
@@ -234,6 +234,9 @@ export class FlexDirective extends BaseDirective2 {
       this.marshal.trackValue(this.parentElement, 'layout')
         .pipe(takeUntil(this.destroySubject))
         .subscribe(this.onLayoutChange.bind(this));
+      this.marshal.trackValue(this.nativeElement, 'layout-align')
+        .pipe(takeUntil(this.destroySubject))
+        .subscribe(this.triggerReflow.bind(this));
     }
   }
 
diff --git a/src/lib/flex/layout-align/layout-align.spec.ts b/src/lib/flex/layout-align/layout-align.spec.ts
index 61ac28df3..1b21cfa4e 100644
--- a/src/lib/flex/layout-align/layout-align.spec.ts
+++ b/src/lib/flex/layout-align/layout-align.spec.ts
@@ -304,6 +304,28 @@ describe('layout-align directive', () => {
       }, styler);
     });
 
+    it('should add responsive styles with fxFlex', () => {
+      createTestComponent(`
+        <div fxFlex.gt-sm="25%" fxFlex.lt-md="100%" fxLayoutAlign="center end"></div>
+      `);
+
+      expectNativeEl(fixture).not.toHaveStyle({
+        'max-width': '25%',
+      }, styler);
+
+      mediaController.activate('md', true);
+
+      expectNativeEl(fixture).toHaveStyle({
+        'max-width': '25%',
+      }, styler);
+
+      mediaController.activate('sm', true);
+
+      expectNativeEl(fixture).not.toHaveStyle({
+        'max-width': '25%',
+      }, styler);
+    });
+
     it('should update responsive styles when the layout direction changes', () => {
       createTestComponent(`
         <div fxLayout