如何在保持相同大小的同时允许弹性项目增长？答案

【问题标题】：How can I allow flex-items to grow while keeping the same size?如何在保持相同大小的同时允许弹性项目增长？
【发布时间】：2015-03-20 09:37:00
【问题描述】：

Flexbox 是网页设计师想要的最酷的工具之一。不幸的是，有时我应该做什么并不是很明显。以this plunk 为例。我希望项目扩展以填充该行，而不是一直扩展至最后一行。
我的 CSS 包含以下重要内容：

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

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

【问题讨论】：

标签： css flexbox

【解决方案1】：

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

鉴于这是 this other question 的副本，并且在此处再次复制我的答案是错误的，我将链接到它，以供那些发现自己在这里而不是在那里的 Google 员工：

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

我尝试将flex-grow 和flex-shrink 视为“扩展许可”。当其中任何一个具有值时，这意味着该元素具有增长的权限。当所有元素都具有 flex-grow 时，它们将扩展为相同的大小。但是，如果它们都具有flex-shrink 值，则同样的规则也适用。

【讨论】：