Flexbox first element on center and the rest below

Question

There is a good chance someone has asked this question already, but I can't seem to figure out the right keywords to find the answer. I want my first element in a flexbox to be centered and the rest to align below it. Here's a picture of what I am trying to do.

<div style="justify-content:center; flex-direction: column;" >
    <div></div>
    <div></div>
</div>

is not what I am trying to achieve

Answer 1

For the center one div, use:

align-self: center;

And for the bottom ones, use:

align-self: flex-end;

Then you can position it with margins correctly