fix(fxLayoutAlign): add space-between and space-around options (#845)

The actual implementation doesn't allow the 'space-between' and 'space-around' flex
align-content options in the cross-axis. fxLayoutAlign should cover all of them.

Closes #841

Author: aleixsuau

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

@@ -154,14 +154,6 @@ describe('layout-align directive', () => {
           styler
         );
       });
-      it('should add correct styles for `fxLayoutAlign="start baseline"` usage', () => {
-        createTestComponent(`<div fxLayoutAlign='start baseline'></div>`);
-        expectNativeEl(fixture)
-            .toHaveStyle({
-              'justify-content': 'flex-start',
-              'align-items': 'baseline'
-            }, styler);
-      });
       it('should add correct styles for `fxLayoutAlign="start center"` usage', () => {
         createTestComponent(`<div fxLayoutAlign='start center'></div>`);
         expectNativeEl(fixture).toHaveStyle(
@@ -180,6 +172,33 @@ describe('layout-align directive', () => {
             }), styler
         );
       });
+      it('should add correct styles for `fxLayoutAlign="start space-between"` usage', () => {
+        createTestComponent(`<div fxLayoutAlign='start space-between'></div>`);
+        expectNativeEl(fixture).toHaveStyle(
+            extendObject(MAINAXIS_DEFAULTS, {
+              'align-items': 'stretch',
+              'align-content': 'space-between'
+            }), styler
+        );
+      });
+      it('should add correct styles for `fxLayoutAlign="start space-around"` usage', () => {
+        createTestComponent(`<div fxLayoutAlign='start space-around'></div>`);
+        expectNativeEl(fixture).toHaveStyle(
+            extendObject(MAINAXIS_DEFAULTS, {
+              'align-items': 'stretch',
+              'align-content': 'space-around'
+            }), styler
+        );
+      });
+      it('should add correct styles for `fxLayoutAlign="start baseline"` usage', () => {
+        createTestComponent(`<div fxLayoutAlign='start baseline'></div>`);
+        expectNativeEl(fixture)
+            .toHaveStyle({
+              'justify-content': 'flex-start',
+              'align-items': 'baseline',
+              'align-content': 'stretch'
+            }, styler);
+      });
       it('should add ignore invalid cross-axis values', () => {
         createTestComponent(`<div fxLayoutAlign='start invalid'></div>`);
         expectNativeEl(fixture).toHaveStyle(

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

@@ -171,16 +171,25 @@ export class LayoutAlignDirective extends BaseDirective implements OnInit, OnCha
       case 'flex-start':
         css['align-items'] = css['align-content'] = 'flex-start';
         break;
-      case 'baseline':
-        css['align-items'] = 'baseline';
-        break;
       case 'center':
         css['align-items'] = css['align-content'] = 'center';
         break;
       case 'end':
       case 'flex-end':
         css['align-items'] = css['align-content'] = 'flex-end';
         break;
+      case 'space-between':
+        css['align-content'] = 'space-between';
+        css['align-items'] = 'stretch';
+        break;
+      case 'space-around':
+        css['align-content'] = 'space-around';
+        css['align-items'] = 'stretch';
+        break;
+      case 'baseline':
+        css['align-content'] = 'stretch';
+        css['align-items'] = 'baseline';
+        break;
       case 'stretch':
       default : // 'stretch'
         css['align-items'] = css['align-content'] = 'stretch';   // default cross axis