css flex how to align one item bottom code example
Example: css flex bottom
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 */
Show code snippet
Alternatively, you can make the element before the a grow to fill the available space:
p { flex-grow: 1; } /* Grow to fill available space */