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不是为了尽可能地包装儿童。它仅用于水平或垂直堆叠儿童（弹性物品）。要获得所需的布局，您必须使用多个嵌套柔性盒。从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 multi-column layouts可以实现所需的布局。至少在你的按钮，它似乎工作

<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