我怎样才能让弹性项目在保持相同大小的同时增长？

Question

Flexbox 是网页设计师梦寐以求的最酷的工具之一。不幸的是，有时我应该做什么并不是很明显。举个例子，this plunk。我希望项目展开以填满行，而不是一直展开到最后一行。
我的 CSS 包含以下重要内容：

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

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

Answer 1

这是目前无法通过 CSS Flexbox 表达的内容。有人 asked basically this exact question on the CSS Working Group Mailing List a few days ago, and the response 说：“目前，不，这是不可能的。不过，这是 Flexbox 2 的高优先级项目。

不过，您可以使用 max-width 来破解一些您想要的东西——这将防止弹性项目（尤其是最后一行的项目）无限增长。这是一个具有非零 flex-grow 和 max-width: 10em.

的 forked version of your plunk

（我随意选择了 10em；你也可以使用 max-width: calc(100%/5)，例如，如果你想确保每个 flex 项目不超过行的 1/5。 )

Answer 2

我通过调整 flex-shrink 实现了您想要的效果。

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

我试着把 flex-grow 和 flex-shrink 想成 "permission to expand"。当其中一个有值时，这意味着该元素有权增长。当所有元素都具有 flex-grow 时，它们将扩展到相同的大小。但是，如果它们都具有 flex-shrink 值，同样的规则也适用。

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

Answer 3

我遇到了完全相同的问题，并设法找到了一个完全有效的解决方法来解决这个 flexbox 缺点。

鉴于这是 this other question 的副本，再次将我的答案复制到这里是错误的，我将 link 转到它，以供那些发现自己在这里的 Google 员工使用不在那里：

How to keep wrapped flex-items the same width as the elements on the previous row?

我怎样才能让弹性项目在保持相同大小的同时增长？

How can I allow flex-items to grow while keeping the same size?

css

flexbox