Как я могу позволить гибким элементам расти при сохранении одинакового размера?

Flexbox - один из самых классных инструментов, который может пожелать веб-дизайнер. К сожалению, иногда не сразу видно, что я должен делать. Возьмем, к примеру, этот плунжер. Я хотел бы, чтобы элементы расширялись, чтобы заполнить строку, не расширяя ее в последней строке.
Мой CSS содержит этот важный материал:

.recipe-picker recipe {
    -webkit-flex: 0 1 8em;
    flex: 0 1 8em;

    height: 12em;
}

Если я изменяю 0 на любое положительное число (что соответствует свойству flex-grow), последняя строка элемента будет растягиваться супер уродливым способом. Остальные элементы ведут себя довольно красиво, но последняя строка должна иметь тот же размер, что и остальные элементы.
Что я могу сделать, чтобы исправить это поведение?

Ответ 1

Это то, что не может быть выражено с помощью CSS Flexbox прямо сейчас. Кто-то задал в основном этот точный вопрос в списке рассылки рабочей группы CSS несколько дней назад, а ответ был: "На данный момент нет, это невозможно. Это высокоприоритетный элемент для Flexbox 2.

Возможно, вы сможете взломать что-то вроде того, что хотите использовать max-width, тем не менее, из-за бесконечного роста элементов flex (особенно на последней строке). Здесь разветвленная версия вашего plunk с ненулевым гибким выражением и max-width: 10em.

(я выбрал 10em произвольно, вы также можете использовать, например, max-width: calc(100%/5), если вы хотите убедиться, что каждый элемент flex занимает не более 1/5 строки, например.)

Ответ 2

Я добился того, что вы искали, настроив flex-shrink.

.recipe-picker recipe {
flex: 0 0 8em;
}

Я пытаюсь думать о flex-grow и flex-shrink как "разрешении на расширение". Когда либо имеет значение, это означает, что у элемента есть разрешение на рост. Когда все элементы имеют гибкий рост, они будут расширяться до того же размера. Но одно и то же правило выполняется, если все они имеют значение flex-shrink.

http://plnkr.co/edit/sxHUzIRPlbstpOzoGcR6?p=preview

Ответ 3

У меня была такая же проблема, и мне удалось найти полностью рабочий обходной путь для устранения этого недостатка flexbox.

Учитывая, что это дубликат этого другого вопроса, и было бы неправильно копировать мой ответ здесь снова, я собираюсь ссылаться на него, для тех Гуглеров, которые оказываются здесь, а не там:

Как сохранить обернутые гибкие элементы той же ширины, что и элементы предыдущей строки?