title: Align footer to bottom of flexbox
body: <p>I have some flexboxes where I'd like to include some footer information in each. I'm trying to get the footer to align to the bottom of the flexbox no matter how short or long the content actually is. I've tried playing with auto margins and the flexbox settings, but can't seem to find a way to do it. </p>
  
  <p>This is my original setup:</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>.card-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  .card {
    flex: 0 1 100%;
    margin: 0 10px 10px 0;
    border: 1px solid grey;
    border-top: 10px solid black;
    box-shadow: 1px 1px 3px #888;
  }
  
  .card-content {
    padding: 10px;
  }
  
  @media all and (min-width: 30em) {
    .card {
      flex: 0 1 30%;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-wrapper"&gt;
    &lt;a href="#" class="card"&gt;
      &lt;div class="card-content"&gt;
        &lt;h2&gt;Title&lt;/h2&gt;
        &lt;p&gt;Content&lt;/p&gt;
        &lt;p&gt;This should be the footer.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>