Align an element to bottom with flexbox

Question

I have a div with some children:

<div class="content">   <h1>heading 1</h1>   <h2>heading 2</h2>   <p>Some more or less text</p>   <a href="/" class="button">Click me</a> </div> 

and I want the following layout:

 ------------------- |heading 1          | |heading 2          |  |paragraph text     | |can have many      | |rows               | |                   | |                   | |                   |  |link-button        |  ------------------- 

Regardless how much text is in the p I want to stick the .button always at the bottom without taking it out of the flow. I've heard this can be achievable with Flexbox but I can't get it to work.

Answer 1

You can use auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */ a { margin-top: auto; } /* Push it and following elements to the bottom */ 

.content {    height: 200px;    border: 1px solid;    display: flex;    flex-direction: column;  }  h1, h2 {    margin: 0;  }  a {    margin-top: auto;  }

<div class="content">    <h1>heading 1</h1>    <h2>heading 2</h2>    <p>Some text more or less</p>    <a href="/" class="button">Click me</a>  </div>

Alternatively, you can make the element before the a grow to fill the available space:

p { flex-grow: 1; } /* Grow to fill available space */ 

.content {    height: 200px;    border: 1px solid;    display: flex;    flex-direction: column;  }  h1, h2 {    margin: 0;  }  p {    flex-grow: 1;  }

<div class="content">    <h1>heading 1</h1>    <h2>heading 2</h2>    <p>Some text more or less</p>    <a href="/" class="button">Click me</a>  </div>