Question

我正在寻找一种方法，在使用flexbox时使用flex-growth: 1创建同等大小的框。通过使用：

定义父级，这非常有用

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

及其子女：

flex: 1 0 10rem;

但是，与前一行中的框相比，最后一行（取决于该行中的块数）的框宽度不同。有没有办法解决这个问题，同时仍然使用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>

Answer 2

似乎如果flex-grow设置为1，你已明确声明你不关心盒子的大小相同 - 当给定的行具有较少的项目时，你已经指示它比你的flex更大-basis。

在与您的max-width相等的项目上设置flex-basis是否达到了您想要的效果？请参阅http://jsfiddle.net/C2q8D/4/。我还在flex容器中添加了justify-content属性;只是试验一下它如何影响这种布局。

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

HTML

CSS

2 个答案:

解决方案

CSS

HTML