在多行中管理CSS flex-box增长以创建等块的网格 [英] Managing CSS flex-box growth in multi-line to create a grid of equal blocks
问题描述
我正在寻找一种方法,在使用 flex-growth:1 时,使用
flexbox
/ code>。这通过定义父对象很有用:
I am looking for a way to create equally sized boxes with flexbox
while using flex-growth: 1
. This works pretty good by defining the parent with:
display: flex;
flex-flow: row-wrap;
及其子级:
flex: 1 0 10rem;
但是,LAST行将(取决于该行中的块的数量)其框与上一行中的框相比。是否有办法解决这个问题,同时仍在使用flex-grow?
However, the LAST line will (depending on the amount of blocks in that line) have different widths for its boxes in comparison to the boxes in the previous lines. Is there a way to work around this while still using flex-grow?
<section>
<div>aaaaaaaaaaaaaaaaaaaa</div>
<div>bbbbbbbbbbbbbbbbbbbb</div>
<div>cccccccccccccccccccc</div>
<div>dddddddddddddddddddd</div>
<div>eeeeeeeeeeeeeeeeeeee</div>
<div>ffffffffffffffffffff</div>
<div>gggggggggggggggggggg</div>
</section>
CSS
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项目大于上面的行(因为该行上的项目较少划分空间)。
Note in http://jsfiddle.net/C2q8D/3/ that the flex items in the last line are bigger than the lines above (as there are less items on that line to divide the space).
推荐答案
这是完全可能的,但是,你必须知道你将有多少列最大值。 http://jsfiddle.net/kelunik/C2q8D/6/
This is totally possible, however, you have to know how many columns you'll have at a maximum. http://jsfiddle.net/kelunik/C2q8D/6/
通过添加几个空的占位符,您的卡的大小相同。你只需要确保,你添加了足够的占位符。
By adding a few empty placeholders, your cards get equally sized. You just have to make sure, you're adding enough placeholders. It doesn't matter if there are too many, because they'll have a height of zero and are not visible.
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
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>
这篇关于在多行中管理CSS flex-box增长以创建等块的网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!