fix(fxFlex): restore correct styles after fxLayoutAlign is applied (#1038)

There is currently a race condition when `fxFlex` and `fxLayoutAlign`
are present on the same element. Both directives end up injecting
`max-width`/`max-height` stylings onto their host element, which
leads to a conflict when both are present.

The intended behavior is to have child elements take precandence
due to their higher specificity/importance, so this commit adds
a watcher for a sibling `fxLayoutAlign` in `fxFlex` to retrigger
styles.

Fixes #1038

Author: CaerusKaru

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));
     }
   }
 

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