CSS：Flex儿童的宽度和浮动

Question

我想实现这样的定位（这些是按钮，但无关紧要）：

|-------|-------|-------|-------|
|       |       | small |       |
|       |       |-------|       |
|  big  |  big  | small |  big  |
|-------|-------|-------|-------|

所以我会把它称为从上到下，从左到右 - 如果有足够的地方，浏览器应该将元素放在前一个元素之下，否则 - 放在旁边。 我不知道会有多少元素，也不知道它们的宽度等等 - 它必须非常灵活。

经过短暂的研究，我发现了display: flex 。 它看起来很有前途（我不需要兼容不同的浏览器 - 我的计划是使用html进行本地应用程序）但是有一个问题。

注意：我不希望它占据100％的宽度 - 它应该只占用所需的空间。 float: left的父母似乎是完美的。

在简单的情况下：大按钮，大按钮，小按钮，大按钮 - 它的工作完美。 当我再添加一个小按钮时出现问题 - 它显示正确 - 在前一个按钮下但父母更大！

这是我得到的代码（并在这里小提琴，显示了这两种情况： http ： //jsfiddle.net/h7SK7/ ）：

  <div class="container">
    <button>Lorem</button>
    <button class="small">Dolor</button>
    <button class="small">Sit</button>
   </div>

div.container {
    height:50px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    float:left;
}

button {   
    height:50px;   
}

button.small {
    height:20px;
}

谁能帮我？

Answer 1

尝试在div中放置小按钮。 喜欢这个JSFiddle

<div class="container">
        <button>Lorem</button>
         <div class="box">
           <button class="small">Dolor</button>
           <button class="small">Sit</button>
         </div>
</div>

.box{
    width:70px;
}

Answer 2

Flexbox不是要尽可能紧密地包装儿童。 它只适用于水平或垂直堆叠儿童（柔性物品）。 要获得所需的布局，必须使用多个嵌套的flexbox。 来自CSS Flexible Box Layout Module

抽象
...
可以容易地操纵儿童的水平和垂直对齐。 这些框的嵌套（水平内部垂直或垂直内部水平）可用于构建二维布局。

因此，要获得所需的布局，必须将两个小按钮包装到flexbox中，然后将container更改为flex-direction: row

<div class="container">
    <button>Lorem</button>
    <div class="small">
        <button>Dolor</button>
        <button>Sit</button>
    </div>
</div>

div.container {
    display: flex;
    flex-direction: row;
}
div.small {
    display: flex;
    flex-direction: column;
}
div.small button {
    height:20px;
}

见修改后的JSFiddle

更新：

也许， CSS多列布局实现了所需的布局。 至少用你的按钮，它似乎工作

<div class="container">
    <button>Lorem</button>
    <button class="small">Dolor</button>
    <button class="small">Sit</button>
    <button>Amet</button>
</div>

.container {
    -moz-column-width: 50px;
    -webkit-column-width: 50px;
    column-width: 50px;
}
button {
    width: 60px;
    height: 50px;
}
button.small {
    height: 20px;
}

的jsfiddle