Add gutter to bootstrap flexbox grid
<p>I'm trying to add gutters to a Bootstrap 4 site. I'm also using <code>enable-flexbox:true</code>;</p>

<p>I'm trying to achieve a look like <a href="http://designmodo.com/bootstrap-4-flexbox/" rel="nofollow noreferrer">http://designmodo.com/bootstrap-4-flexbox/</a>: <a href="https://i.stack.imgur.com/HUD9N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HUD9N.png" alt="enter image description here"></a></p>

<p>There are <strong>equal</strong> gutters on the bottom of each item, and to the right of each item.</p>

<p>My code is pretty simple:</p>

<pre><code>&lt;div class='row'&gt;
  &lt;div class='col-md-6 block'&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and </p>

<pre><code>.block {
  background: black;
  height: 200px;
}
</code></pre>

<p>However, this doesn't create gutters. All the blocks are connecting. I realize I can put block as a new div under .col-md-4, but that ruins flexbox responsiveness.</p>