fix(fxFlex): apply correct flex-basis stylings

* Fix for when flex-basis is unitless and 0
* Fix for when no width/height is applied and flex-basis should be
  set
* Fix for IE flex-basis with calc values
* Fix for SSR properties set to 0

Fixes #277
Fixes #280
Fixes #323
Fixes #528
Fixes #534

src/lib/api/flexbox/flex-offset.spec.ts

@@ -72,21 +72,39 @@ describe('flex-offset directive', () => {
       let dom = fixture.debugElement.children[0];
       expectEl(dom).toHaveStyle({'margin-left': '32px'}, styler);
       if (platform.BLINK) {
-        expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '1e-09px'
+        }, styler);
       } else if (platform.FIREFOX) {
-        expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '1e-9px'
+        }, styler);
       } else if (platform.EDGE || platform.TRIDENT) {
-        expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '0px'
+        }, styler);
       } else {
-        expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '0.000000001px'
+        }, styler);
       }
     });
 
 
     it('should work with percentage values', () => {
       componentWithTemplate(`<div fxFlexOffset='17' fxFlex='37'></div>`);
       expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 100%',
+        'flex-grow': '1',
+        'flex-shrink': '1',
+        'flex-basis': '100%',
         'box-sizing': 'border-box',
         'margin-left': '17%'
       }, styler);
@@ -153,7 +171,9 @@ describe('flex-offset directive', () => {
         `);
       expectNativeEl(fixture).not.toHaveStyle({
         'flex-direction': 'row',
-        'flex': '1 1 100%',
+        'flex-grow': '1',
+        'flex-shrink': '1',
+        'flex-basis': '100%',
         'margin-left': '52px',
       }, styler);
     });