如何使用css3'；flexbox&x27；做这样的布局？

这是一个

div

容器。我知道如何轻松地使用显示和宽度使其看起来像这样，但如何使用

CSS3

flexbox

制作如下4个按钮布局

.container{
背景颜色：蓝色；
宽度：200px；
填充：10px；
}
钮扣{
显示：块；
宽度：100%；
}
按钮：第n个类型（2），
按钮：第n个类型（3）{
宽度：49%；
显示：内联；
}

按钮1
按钮1
按钮1
按钮1

使用

flex-flow:row-wrap

并使顶部/底部按钮占用两倍的空间

div，div*{框大小：边框框；}
div{display:flex；flex-flow:row-wrap；padding:50px；}
div按钮{flex:1；}
div按钮：第一个孩子，
div按钮：最后一个子项{flex:2100%}

1.
2.
3.
4.

HTML

<div class="container">
    <button>Button1</button>
    <button>Button2</button>
    <button>Button3</button>
    <button>Button4</button>
</div>

---

在你需要帮助的事情上，始终表现出你的努力，你会得到帮助。你的问题除了可爱的图片外，没有表现出任何努力：）一旦我将填充添加到容器div，它只会破坏布局。@ZhenyangHua你需要

框大小：边框框

，这样填充就不会添加到宽度。如果我想将填充添加到容器div（而不是按钮），该怎么办？这似乎打破了flex布局。

.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%; }