Align an element to bottom with flexbox

by

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="https://stackoverflow.com/" 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="https://stackoverflow.com/" class="button">Click me</a>
</div>

More Related Contents:

  1. Why don’t flex items shrink past content size?
  2. Targeting flex items on the last or specific row
  3. Can’t scroll to top of flex item that is overflowing container
  4. Fill the remaining height or width in a flex container
  5. How to vertically align text inside a flexbox?
  6. Equal height rows in a flex container
  7. Equal height children of flex items
  8. flex-grow not sizing flex items as expected
  9. How to specify line breaks in a multi-line flexbox layout?
  10. How to add 1px margin to a flex item that is flex: 0 0 25%?
  11. How can I combine flexbox and vertical scroll in a full-height app?
  12. Why isn’t object-fit working in flexbox?
  13. Keep the middle item centered when side items have different widths
  14. How can I make my flexbox layout take 100% vertical space?
  15. text-overflow is not working when using display:flex
  16. Is there a way to remove a div but keep its elements?
  17. Flexbox alternative for IE9
  18. Prevent flex items from stretching
  19. Flex items not respecting margins and box-sizing: border-box
  20. CSS grid – maximum number of columns without media queries
  21. Make flex items overlap
  22. 5 items per row, auto-resize items in flexbox
  23. Aligning elements left and center with flexbox
  24. Flexbox, z-index & position: static: Why isn’t it working?
  25. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  26. Why are some of my CSS rules not working?
  27. Different implementation of Flexbox in Firefox and Chrome
  28. Why does flex-box work with a div, but not a table?
  29. Make flex container take width of content, not width 100%
  30. justify-content: space-between failing to align elements as expected

Leave a Comment