如何用css3'flexbox'做成这样的布局？

Question

这是一个div容器。我知道如何轻松地使用 display 和 width 使它看起来像这样，但是如何使用 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 并使顶部/底部按钮占用 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

如何用css3'flexbox'做成这样的布局？

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

css

flexbox