在多行中管理 CSS flex-box 增长以创建相等块的网格 [英] Managing CSS flex-box growth in multi-line to create a grid of equal blocks

问题描述

我正在寻找一种在使用 flex-growth: 1 的同时使用 flexbox 创建大小相等 盒子的方法.通过使用以下方式定义父级，这很有效:

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;

但是，与前几行中的框相比，最后一行的框的宽度(取决于该行中的块数)将具有不同的宽度.有没有办法在仍然使用 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

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

<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屋！