FlexBox是网页设计师所希望的最酷工具之一.不幸的是,有时我不应该立即明白我应该做什么.以
this plunk为例.我希望扩展项目以填充行,而不是在最后一行中一直扩展.
我的CSS包含这些重要的东西：
我的CSS包含这些重要的东西：
.recipe-picker recipe {
-webkit-flex: 0 1 8em;
flex: 0 1 8em;
height: 12em;
}
如果我将0更改为任何正数(对应于flex-grow属性),则最后一项将以超丑的方式拉伸.其余的项目表现相当不错,但最后一行应保持与其他项目相同的大小.
我该怎么做才能解决这个问题？
解决方法
这是目前无法通过CSS FlexBox表达的内容.几天前,CSS工作组邮件列表上有人
asked basically this exact question,而
response是：“目前,不,这是不可能的.但这是FlexBox 2的高优先级项目.
尽管如此,你可能能够使用max-width来破解你想要的东西 – 这会阻止弹性项目(特别是最后一行的那些)无限增长.这是一个非零弹性增长的forked version of your plunk,最大宽度：10em.
(我任意选择10em;你也可以使用例如max-width：calc(100％/ 5),如果你想确保每个弹性项目占用不超过该行的1/5.)
