Как использовать css3 'flexbox', чтобы сделать такой макет?

Question

Контейнер div. Я знаю, как легко использовать отображение и ширину, чтобы он выглядел так, но как использовать CSS3flexbox, чтобы сделать 4 макета кнопок следующим образом?

.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

Использование flex-flow:row wrap и сделать верх/низ кнопки удвоиться пространство

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