При flex-flow: row wrap и flex: auto как задать ширину последним элементам в ряду как и всем остальным?

Question

[freialex]

Есть разметка на flexbox для элементов:

.flexbox-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.item {
    flex: auto;
    -webkit-flex: auto;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

Но если в последнем ряду элементов меньше, чем в других, то они становятся шире.

Можно ли сделать, чтобы они все были одинаковой ширины?

Пример: https://jsfiddle.net/rz841oy0/

Решение:

Нужно продублировать в конце item.

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Answer 1

[Вадим Белкин]

Самый простой вариант

.item {
  max-width: 100px;
}

А вообще вот примеры сеток на flex: philipwalton.github.io/solved-by-flexbox/demos/grids и flexboxgrid.com

Comments

[freialex]

Пробовал, но тогда теряется вся магия flexbox и элементы не растягиваются на всю ширину.

[Вадим Белкин]

вам нужно определенное кол-во элементов в строку или как они у вас должны распределяться?

[freialex]

Количество неопределенное, изменяется в зависимости от разрешения экрана.

[Вадим Белкин]

Почему бы вам не задавать ширину в процентах, для каждого экрана разную, аналогично адаптивным сеткам фреймворков. И так же и max-width. Так у вас ячейки флекс сетки будут всегда одинаковой ширины и растянуты на весь контейнер (если правильно размеры зададите)

[freialex]

Ширина элементов 100px±10 и помещаются на всю ширину экрана. Т.е. от 2000px до 320px. Слишком много правил получается.

Answer 2

[Rithmsamba]

Уберите у .item свойство flex:auto