Using automatic margins

Something notable about flexbox is that it does a fresh take of the auto keyword for margin. Automatic margins are now working very closely with flexbox. I can now target my button as the selector and give it margin-top of auto:

.columns {  display: flex;  justify-content: space-between;}.column {  flex-basis: 30%;  display: flex;}.column figure {  max-width: 50%;}.column .button { margin-top: auto;}

Boom! The space above the button is now automatically calculated, and the button is positioned at the bottom of each column:

This also works when flex-direction is row; you can use margin-left: auto; or margin-right: auto to ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.