Управление ростом Flex-box CSS в многострочном режиме для создания сетки равных блоков

Я ищу способ создания одинаковых размеров с 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/, что элементы гибкости в последней строке больше, чем строки выше (поскольку на этой строке меньше элементов для разделения пространства).

Ответ 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>

Ответ 2

Похоже, если для flex-grow установлено значение 1, вы явно заявили, что вам не нужны одинаковые размеры ящиков, - если в заданной строке меньше элементов, вы указали, что она будет больше, чем ваш flex -базиса.

Выполняет ли установка max-width элементов, равных вашему flex-basis, что вы хотите? Для этого см. http://jsfiddle.net/C2q8D/4/. Я добавил свойство justify-content в контейнер flex; просто экспериментируя с тем, как это влияет на этот макет.