Pushing elements to the bottom of a container. This used to be a bit of a hassle before flexbox came along. You had to position the element absolutely, use negative placement, extra padding, and even after all that it all usually went wrong when the content was dynamic and not consistent. Luckily, CSS has improved and we now have flexbox.
You might be thinking as I did, “sure, we just use
align-content: space-between on the container element.” That’ll work, but, what if you have more than one element in the container and you only want the last element to stick to the bottom?
Okay, so I thought, “maybe we just tell that last element to
align-self: flex-end“, right? Well, turns out that flex-end on a flex column layout isn’t what I thought it’d be. If you make the elements smaller than the width of the flex column, you can see what CSS means by the “end” of the flex column. The end of a flex column is all the way to the right. It made sense to me when I thought about what would happen to
.element-2 if it worked the other way around.
Okay, so, how does one make the last element stick to the bottom for a flex column layout? The magic is in
margin-top: auto of course!
And sure, why not? We’ve been using
margin: 0 auto; to magically center stuff horizontally since the ’70s (well, maybe not since the ’70s). In fact, now if the container has display flex, you can now use
margin: auto 0; on a child element to center stuff vertically as well!
Culture Foundry is a digital experience agency that helps our clients elevate their impact with beautiful technology. We provide the expertise and insight at every layer that makes a great digital experience for websites and applications possible. If you're committed to elevating your digital experience, contact us and we'd be happy to schedule a chat to see if we're a fit.
(Psst! We also happen to be a great place to work.)