在多行中管理CSS弹性框增长以创建相等块的网格

Question

我正在寻找一种方法来创建同样大小的盒子flexbox同时使用flex-growth: 1.通过使用以下内容定义父项,这非常有用:

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

及其子女:

flex: 1 0 10rem;

但是,与前一行中的框相比,LAST行将(取决于该行中的块数)具有不同的框宽度.有没有办法解决这个问题,同时仍然使用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/中最后一行中的弹性项目大于上面的行(因为该行上的项目用于划分空间的数量较少).

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>