title: fxLayoutGap return unexpectable react while using angular with angular-flex
body: <p>I am using @angular/flex-layout "^7.0.0-beta.24" with angular 7.0.4 and angular-material 7.1.1.
  The code I am using is:</p>
  
  <pre><code>&lt;div fxLayout="column"&gt;
    &lt;div fxLayout="row" fxLayoutGap="13px"&gt;
      &lt;div fxFlex&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I expect to see some margin around second element, however it is not working.</p>
  
  <p>If I change it for the following code:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="16px grid"&gt;
      &lt;div fxFlex&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then I am getting something absolutely wrong like in the attached picture. 
  Is it a problem with versions or something else?<a href="https://i.stack.imgur.com/9EJRQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9EJRQ.png" alt="enter image description here"></a></p>