Как расположить элементы во flex-контейнере не на всю ширину?

Question

[shsv382]

Есть галерея а-ля shutterstock, которая собрана на стилях:

.fluid-gallery {
    display: flex;
    flex-wrap: wrap;
}

.fluid-gallery-item {
    flex-grow: 1;
}

Все работает, все красиво, но последние элементы растягиваются, заполняя всю ширину галереи. Как сделать так, чтобы выравнивание по ширине осталось, а последние элементы, общая ширина которых меньше ширины родителя, не растягивались?

Comments

[alexalexes]

Не используйте flex-grow, если не хотите растягивать элементы:

.fluid-gallery-item {
    flex-grow: 1;
}

Используйте justify-content на контейнере, если хотите их спозиционировать:

.fluid-gallery {
    display: flex;
    flex-wrap: wrap;
}

[Ankhena]

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