css - 我怎样才能让 flex 元素在保持相同大小的同时增长？

Question

Flexbox 是网页设计师梦寐以求的最酷的工具之一。不幸的是，有时我应该做什么并不是很明显。以 this plunk 为例.我希望这些元素能够展开以填满行，而不是一直展开到最后一行。
我的 CSS 包含以下重要内容:

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

如果我将 0 更改为任何正数(对应于 flex-grow 属性)，最后一行将以非常难看的方式拉伸(stretch)。其余元素表现相当不错，但最后一行应与其余元素保持相同大小。
我该怎么做才能解决此问题？

Answer 1

这是目前无法通过 CSS Flexbox 表达的东西。有人asked basically this exact question几天前在 CSS 工作组邮件列表上，以及 response是:“目前，不，这是不可能的。不过，这是 Flexbox 2 的高优先级元素。

虽然您可以使用 max-width 来破解一些您想要的东西——这将防止 flex 元素(特别是最后一行的元素)无限增长。这是一个 forked version of your plunk具有非零 flex-grow 和 max-width: 10em。

(我随意选择了 10em；您也可以使用例如 max-width: calc(100%/5)，如果您想确保每个 flex 元素占用例如，向上不超过直线的 1/5。)