How can I push the button to the bottom of the page using flexbox?

Question

How do I use flexbox to position the button on the very bottom? Or should I use position: absolute?

.container {
  display: flex; 
  flex-direction: column; 
  border: 1px solid; 
  height: 180px;
}

button {
  align-self: center;
}

    <html>
      <body>
        <div class="container">
          <p> Paragraph one </p>
          <p> Paragraph two </p>
          <button > on the very bottom </button>
        </div>
      </body>
    </html>

score 1 · Accepted Answer · answered Mar 09 '18 at 09:40

Using flexbox, add flex-grow: 1; to the second paragraph.

.container {
  display: flex; 
  flex-direction: column; 
  border: 1px solid; 
  height: 180px;
}

p.flex-bottom {
  flex-grow: 1;
}

button {
  align-self: center;
}

    <html>
      <body>
        <div class="container">
          <p> Paragraph one </p>
          <p class="flex-bottom"> Paragraph two </p>
          <button > on the very bottom </button>
        </div>
      </body>
    </html>

How can I push the button to the bottom of the page using flexbox?

1 Answers1