Question

我想实现这样的定位（这些是按钮，但没关系）：

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

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

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

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

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

这是我得到的代码（并在这里表示，显示了这两种情况：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

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

因此，要获得所需的布局，必须将两个小按钮包装到弹性箱中，然后将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

CSS：Flex儿童的宽度和浮动

2 个答案: