css - 管理多行 CSS flex-box 增长以创建相等 block 的网格

Question

我正在寻找一种在使用 flex-growth: 1 的同时使用 flexbox 创建大小相同 框的方法。通过定义父级，这非常有效:

display: flex;
flex-flow: row-wrap;

及其 child :

flex: 1 0 10rem;

但是，与前几行中的框相比，最后一行(取决于该行中 block 的数量)其框的宽度不同。有没有办法在仍然使用 flex-grow 的同时解决这个问题？

HTML

<section>
    <div>aaaaaaaaaaaaaaaaaaaa</div>
    <div>bbbbbbbbbbbbbbbbbbbb</div>
    <div>cccccccccccccccccccc</div>
    <div>dddddddddddddddddddd</div>
    <div>eeeeeeeeeeeeeeeeeeee</div>
    <div>ffffffffffffffffffff</div>
    <div>gggggggggggggggggggg</div>
</section>

CSS

section {
    display: flex;
    flex-flow: row wrap;
    background-color: blue;
    width: 700px;
}

div {
    background-color: red;
    height: 100px;
    flex: 1 0 200px;
}

div:nth-child(even) {
    background-color: green;
}

备注 http://jsfiddle.net/C2q8D/3/最后一行中的 flex 元素比上面几行大(因为该行上用于划分空间的元素较少)。

Answer 1

这是完全可能的，但是，您必须知道最多有多少列。 http://jsfiddle.net/kelunik/C2q8D/6/

解决方案

通过添加一些空白占位符，您的卡片大小会相同。您只需确保添加了足够的占位符。如果数量太多也没关系，因为它们的高度将为零并且不可见。

CSS

section {
    display: flex;
    flex-flow: row wrap;
    background-color: blue;
}

div {
    background-color: red;
    height: 3rem;
    flex: 1 0 10rem;
}

div:nth-child(even) {
    background-color: green;
}

div:empty {
    margin: 0;
    height: 0;
    border: 0;
    background: transparent;
}

HTML

<section>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>