title: How can I push the button to the bottom of the page using flexbox?
body: <p>How do I use flexbox to position the button on the very bottom? 
  Or should I use <code>position: absolute</code>?</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>.container {
    display: flex; 
    flex-direction: column; 
    border: 1px solid; 
    height: 180px;
  }
  
  button {
    align-self: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;html&gt;
        &lt;body&gt;
          &lt;div class="container"&gt;
            &lt;p&gt; Paragraph one &lt;/p&gt;
            &lt;p&gt; Paragraph two &lt;/p&gt;
            &lt;button &gt; on the very bottom &lt;/button&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>