How to use css3 'flexbox' to make a layout like this? - css

Question

Here is a div container. I know how to easily use display and width to make it look like this, but how to use CSS3 flexbox to make 4 buttons layout as follow?
.container {
background-color: blue;
width: 200px;
padding: 10px;
}
button {
display: block;
width: 100%;
}
button:nth-of-type(2),
button:nth-of-type(3) {
width: 49%;
display: inline;
}
<div class="container">
<button>Button1</button>
<button>Button1</button>
<button>Button1</button>
<button>Button1</button>
</div>

Answer 1

Use flex-flow:row wrap and make the top / bottom buttons take twice the space
div, div *{box-sizing:border-box;}
div{display:flex;flex-flow:row wrap;padding:50px;}
div button{flex:1;}
div button:first-child,
div button:last-child{flex:2 100%}
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>

Answer 2

HTML
<div class="container">
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: blue;
width: 200px;
padding: 10px;
}
button { margin: 5px 0; }
button:nth-of-type(1),
button:nth-of-type(4) { flex: 1 1 100%; }
button:nth-of-type(2),
button:nth-of-type(3) { flex: 0 1 45%; }
DEMO