如何在保持相同大小的同时允许 flex-items 增长? [英] How can I allow flex-items to grow while keeping the same size?

问题描述

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

Flexbox is one of the coolest tools a web designer could wish for. Unfortunately, sometimes it's not immediately obvious what I'm supposed to do. Take, for example, this plunk. I'd like for the items to expand to fill the row, without expanding all the way across in the last row.
My CSS contains this important stuff:

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

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

If I change the 0 to any positive number (which corresponds to the flex-grow property), the last item row will stretch in a super ugly way. The rest of the items behave rather nicely, but the last row should keep the same size as the rest of the items.
What can I do to fix this behavior?

推荐答案

这是目前无法通过 CSS Flexbox 表达的东西.有人在 CSS 工作组基本上问了这个确切的问题几天前的邮件列表，响应是:目前，不，这是不可能的.不过，这是 Flexbox 2 的高优先级项目.

This is something that cannot be expressed via CSS Flexbox right now. Someone asked basically this exact question on the CSS Working Group Mailing List a few days ago, and the response was: "At the moment, no, this is not possible. This is a high-priority item for Flexbox 2, though.

不过，您可以使用 max-width 修改您想要的内容——这会阻止 flex 项目(尤其是最后一行的那些)无限增长.这是一个 你的 plunk 的分叉版本，带有非零 flex-grow 和 最大宽度:10em.

You may be able to hack up something like you want using max-width, though -- that'll prevent flex items (particularly those on the last line) from growing indefinitely. Here's a forked version of your plunk with a nonzero flex-grow, and with max-width: 10em.

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

(I chose 10em arbitrarily; you could also use e.g. max-width: calc(100%/5), if you want to make sure each flex item takes up no more than 1/5 of the line, for example.)

这篇关于如何在保持相同大小的同时允许 flex-items 增长?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！