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表达的内容。几天前，CSS工作组邮件列表中有人asked basically this exact question，response是：＆＃34;目前，不，这是不可能的。不过，这是Flexbox 2的高优先级项目。

你可以使用max-width来破解你想要的东西，但是这会阻止弹性项目（尤其是最后一行的那些）无限增长。这是forked version of your plunk，其中非零弹性增长，max-width: 10em。

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

Answer 2

通过调整flex-shrink，我实现了您的目标。

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

我尝试将flex-grow和flex-shrink视为“扩展权限”。如果有任何值，则表示该元素具有增长权限。当所有元素都具有弹性增长时，它们将扩展到相同的大小。但是，如果它们都具有flex-shrink值，则同样的规则也适用。

Answer 3

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

鉴于这是this other question的重复，再次在这里复制我的答案是错误的，我将链接到它，对于那些发现自己而不在那里的Google员工：