如何使用css3'flexbox'来制作这样的布局？

Question

这是一个div容器。我知道如何轻松使用显示和宽度使其看起来像这样，但如何使用CSS3 flexbox制作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