CSS：Flex 子项宽度和浮动

Question

CSS：Flex 子项宽度和浮动

4

我希望实现这样的定位（这些是按钮，但并不重要）：

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

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

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

注意：我不希望它占据100%的宽度-它只需要占据所需的空间即可。父级上的float: left似乎是完美的。

简单情况下：大按钮，大按钮，小按钮，大按钮-它工作得很好。当我再添加一个小按钮时，问题就出现了-它被正确显示-在前一个按钮下面，但父级变大了！

这是我得到的代码（以及fiddle，在其中显示这两种情况：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;
}

有人能帮我吗？

- Andy

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- syed mohsin · 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;
}

- Olaf Dietsche · Answer 2

Flexbox 不是为了尽可能地紧密排列子元素，而是为了将子元素（flex-items）水平或垂直堆叠。要获得所需的布局，必须使用多个嵌套的 flexboxes。来自 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

译文：