title: Override css flex align-content for a child
body: <p>How can i override <code>align-content: flex-start</code> for a child in the flexbox model?
  I want to move .Card__bottom to the bottom of my card.
  Or maybe i can achieve this without <code>align-content: flex-start</code>?
  But when i remove this property, i get a greater line spacing</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>body {
    background: #dddddd;
    padding: 30px;
  }
  
  .Card {
    width: 320px;
    min-height: 200px;
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px 20px 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
  }
  
  .Card__heading {
    margin: 0;
    flex-basis: 200px;
  }
  
  .Card__icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .Card__description {
    margin: 10px 0;
  }
  
  .Card__action {
    margin: 0 0 10px;
    align-items: center;
    width: 100%;
  }
  
  .Card__bottom {
    align-self: flex-end;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Card"&gt;
    &lt;h2 class="Card__heading"&gt;
      Heading
    &lt;/h2&gt;
    &lt;div class="Card__icon-wrapper"&gt;
      &lt;span class="Card__icon"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;p class="Card__description"&gt;
      Description
    &lt;/p&gt;
    &lt;p class="Card__action"&gt;
      Action Text
    &lt;/p&gt;
    &lt;div class="Card__bottom"&gt;
      Bottom
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>