我正在寻找一种方法,在使用flex-growth时使用flexBox创建大小相同的盒子：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/中,最后一行中的弹性项目大于上面的行(因为该行上的项目用于划分空间的数量较少).
解决方法
这是完全可能的,但是,您必须知道最多会有多少列.
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>
