html - CSS:Flex child 的宽度和 float

我想实现这样的定位(这些是按钮，但没关系):

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

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

经过短暂的研究，我找到了 display: flex 。它看起来非常有前途(我不需要与不同浏览器的兼容性 - 我的计划是使用 html 做本地应用程序)但是有一个问题。

注意:我不希望它占据 100% 的宽度 - 它应该只占用它需要的空间。 parent 上的 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;
}

谁能帮我？

最佳答案

尝试将小按钮放在 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;
}

关于html - CSS:Flex child 的宽度和 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20734812/