title: Aligning items within a Bootstrap 4 .card using Flexbox
body: <p>I'm using Bootstrap 4, and have a div with the <code>card</code> class on it, which has a fixed height. This is what I'm trying to get:</p>
  
  <p><a href="https://i.stack.imgur.com/scUx3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/scUx3.png" alt="Wireframe"></a></p>
  
  <p>The code I'm using is</p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-block d-flex flex-column"&gt;
          &lt;h2 class="card-title h4 align-self-start"&gt;Top Left&lt;/h2&gt;
          &lt;div class="align-self-center"&gt;
              Middle Middle
          &lt;/div&gt;
          &lt;aside class="align-self-end"&gt;Bottom Right&lt;/aside&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but the lines are all squashed together, presumably because the <code>card-block</code> is not expanding to the full height of the <code>card</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/XeL3c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XeL3c.png" alt="FAIL"></a></p>
  
  <p>Is there a way to get the <code>card-block</code> to fill the <code>card</code>, or otherwise get this to display correctly?</p>