fix(fxLayoutAlign): do not apply cross-axis stretch styles when not n…

…eeded (#877)

Closes #876

src/lib/flex/layout-align/layout-align.spec.ts

@@ -196,6 +196,17 @@ describe('layout-align directive', () => {
               'max-height': '100%'
             }, styler);
       });
+      it('should not add special styles when the cross-axis is not `stretch`', () => {
+        createTestComponent(`
+          <div fxLayout
+               fxLayoutAlign='center center'>
+          </div>
+        `);
+
+        expectNativeEl(fixture).not.toHaveStyle({
+          'max-height': '100%'
+        }, styler);
+      });
       it('should add special styles for cross-axis `stretch` when layout is `column`', () => {
         createTestComponent(`<div fxLayout="column" fxLayoutAlign='end stretch'></div>`);
         expectNativeEl(fixture)
@@ -282,6 +293,25 @@ describe('layout-align directive', () => {
       }, styler);
     });
 
+    it('should undo special styles when cross-axis changes from `stretch` to anything else', () => {
+      createTestComponent(`
+        <div fxLayout
+             fxLayoutAlign='center stretch'
+             fxLayoutAlign.md='center center'>
+        </div>
+      `);
+
+      expectNativeEl(fixture).toHaveStyle({
+        'max-height': '100%'
+      }, styler);
+
+      matchMedia.activate('md');
+
+      expectNativeEl(fixture).not.toHaveStyle({
+        'max-height': '100%'
+      }, styler);
+    });
+
     it('should fallback to default styles when the active mediaQuery change is not configured', () => { // tslint:disable-line:max-line-length
       createTestComponent(`
          <div fxLayout

src/lib/flex/layout-align/layout-align.ts

@@ -190,7 +190,9 @@ export class LayoutAlignDirective extends BaseDirective implements OnInit, OnCha
     return extendObject(css, {
       'display' : 'flex',
       'flex-direction' : this._layout || 'row',
-      'box-sizing' : 'border-box'
+      'box-sizing' : 'border-box',
+      'max-width': null,
+      'max-height': null,
     });
   }