How to use flexbox to align two under one - html

Question

How do I use flexbox to align one box at the top with two under like on my screenshot
So far I can align three in a row with this
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
<div className="flex-container">
<div />
<br />
<div />
<div />
</div>
I tried with a br but it did not work

Answer 1

Just providing a different approach if you want a single container; you would just have to target the right elements and apply the right flex properties so the behave how you need them to.
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex div:first-child {
width: 100%;
margin-bottom: 20px;
}
.flex div:not(:first-child) {
flex: 1 0 50%;
}
img {
margin: 0 auto;
display: block;
}
<div class="flex">
<div>
<img src="https://via.placeholder.com/150" />
</div>
<div>
<img src="https://via.placeholder.com/150" />
</div>
<div>
<img src="https://via.placeholder.com/150" />
</div>
</div>

Answer 2

Better to do this with grid:
.flex-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 100px;
}
.flex-container>img {
justify-self: center;
border-radius: 50%;
}
.flex-container>img:nth-child(1) {
grid-column: 1/3;
}
<div class="flex-container">
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
</div>

Answer 3

You can use flex-wrap
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.box1 {
width: 100%;
display: flex;
justify-content: center;
}
<div class="container">
<div class="box1">
<div>
Box 1
</div>
</div>
<div>Box 2</div>
<div>Box 3</div>
</div