title: Adding space between Flex rows
body: <p>I have this html in an Angular 5 component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row&gt;div {
    flex-basis: calc(50% - 20px) !important;
    /* width less horizontal margins */
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div fxLayout="column"&gt;
  
    &lt;div fxLayout="row"&gt;
      &lt;button mat-raised-button color="accent"&gt;
            &lt;mat-icon&gt;play_button&lt;/mat-icon&gt;
            Start Recording
          &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div fxLayout="row"&gt;
    &lt;/div&gt;
  
    &lt;div fxLayout="row"&gt;
      &lt;button mat-raised-button color="accent"&gt;
            &lt;mat-icon&gt;play_button&lt;/mat-icon&gt;
            Stop Recording
          &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div fxLayout="row"&gt;
    &lt;/div&gt;
  
    &lt;div fxLayout="row"&gt;
      &lt;div fxLayout="column"&gt;
        &lt;div&gt;
          &lt;mat-checkbox&gt;Firefox&lt;/mat-checkbox&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;mat-checkbox&gt;Chrome&lt;/mat-checkbox&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;mat-checkbox&gt;Allow XPath&lt;/mat-checkbox&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>it renders to this:</p>
  
  <p><a href="https://i.stack.imgur.com/9No3L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9No3L.png" alt="enter image description here"></a></p>
  
  <p>I tried adding this CSS to increase the spacing between the elements:</p>
  
  <pre><code>.row &gt; div {
    flex-basis: calc(50% - 20px) !important; /* width less horizontal margins */
    margin: 10px;
  }
  </code></pre>
  
  <p>but that didn't work - how can I add vertical spacing between the elements?</p>