fix(api, flex); improve logic with flex-basis values

Author: ThomasBurleson

src/demo-app/app/github-issues/issue.135.demo.ts

@@ -13,7 +13,7 @@ import {Component} from '@angular/core';
         <div class="containerX">
           <div fxLayout="column" class="coloredContainerX box">
             <div fxFlex="auto" fxFlex.gt-sm="70"> &lt;div fxFlex="auto" fxFlex.gt-sm="70" &gt;</div>
-            <div fxFlex="auto" fxFlex.gt-sm="14.6"> &lt;div fxFlex="auto" fxFlex.gt-sm="14.6"&gt;
+            <div fxFlex fxFlex.gt-sm="14.6"> &lt;div fxFlex fxFlex.gt-sm="14.6"&gt;
             </div>
             <div fxFlex="auto" fxFlex.gt-sm="15.4"> &lt;div fxFlex="auto" fxFlex.gt-sm="15.4"&gt;
             </div>

src/demo-app/app/github-issues/issue.266.demo.ts

@@ -25,7 +25,7 @@ import {Component} from '@angular/core';
                 <i class="material-icons">&#xE25D;</i>
             </div>
             <div fxFlex="70%" ngxSplitArea>
-              <div fxLayout="column" fxFlexFill ngxSplit="column">
+              <div fxLayout="column" ngxSplit="column" fxFlexFill>
                 <div fxFlex="50%" ngxSplitArea class="c2r1_body" >
                   <div class="c2r1_header" >Column #2 - Row #1</div>
                   <h1>Layout Dashboard</h1>

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

@@ -58,10 +58,7 @@ describe('flex directive', () => {
 
       let dom = fixture.debugElement.children[0].nativeElement;
       let isBox = _.hasStyle(dom, 'margin-left', '32px');
-      let hasFlex = _.hasStyle(dom, 'flex', '1 1 1e-09px') ||         // IE
-          _.hasStyle(dom, 'flex', '1 1 1e-9px') ||          // Chrome
-          _.hasStyle(dom, 'flex', '1 1 0.000000001px') ||   // Safari
-          _.hasStyle(dom, 'flex', '1 1 0px');
+      let hasFlex = _.hasStyle(dom, 'flex', '1 1 auto');
 
       expect(isBox).toBeTruthy();
       expect(hasFlex).toBe(true);

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

@@ -65,10 +65,7 @@ describe('flex directive', () => {
 
       let dom = fixture.debugElement.children[0].nativeElement;
       let isBox = _.hasStyle(dom, 'box-sizing', 'border-box');
-      let hasFlex = _.hasStyle(dom, 'flex', '1 1 1e-09px') ||         // IE
-          _.hasStyle(dom, 'flex', '1 1 1e-9px') ||          // Chrome
-          _.hasStyle(dom, 'flex', '1 1 0.000000001px') ||   // Safari
-          _.hasStyle(dom, 'flex', '1 1 0px');
+      let hasFlex = _.hasStyle(dom, 'flex', '1 1 auto');
 
       expect(isBox).toBeTruthy();
       expect(hasFlex).toBeTruthy();

src/lib/api/flexbox/flex.ts

@@ -232,10 +232,12 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
 
           // Set max-width = basis if using layout-wrap
           // tslint:disable-next-line:max-line-length
-          // @see https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrappifl-flex-items
+          // @see https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
 
           css = extendObject(clearStyles, { // fix issue #5345
-            'flex': `${grow} ${shrink} ${(isValue || this._wrap) ? basis : '100%'}`,
+            'flex-grow' : `${grow}`,
+            'flex-shrink' : `${shrink}`,
+            'flex-basis' : (isValue || this._wrap) ? `${basis}` : '100%'
           });
           break;
       }