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

【问题标题】：How to use css3 'flexbox' to make a layout like this?如何使用 css3 'flexbox' 来制作这样的布局？
【发布时间】：2015-11-23 11:28:16
【问题描述】：

这是一个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>

【问题讨论】：

总是在你需要帮助的事情上表现出你的努力，你会得到帮助。除了可爱的图片之外，您的问题没有表现出任何努力:)

标签： css flexbox

【解决方案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>

【讨论】：

一旦我向容器 div 添加填充，它只会破坏布局。
@ZhenyangHua 你需要box-sizing:border-box 这样padding 就不会被添加到宽度上。
如果我想为容器 div（而不是按钮）添加内边距怎么办？这似乎破坏了 flex 布局。

【解决方案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

【讨论】：