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

问题描述

Flexbox是网页设计师所期望的最酷的工具之一。不幸的是，有时候我不应该立即明白我应该做什么。以这个plunk 为例。我想要的项目扩大到填补行，没有扩大到最后一行的所有方式。
我的CSS包含这个重要的东西：

  .recipe-picker recipe {
 -webkit-flex：0 1 8em; 
 flex：0 1 8em; 
 
身高：12em; 
 
 $ / code> 

如果我改变 0 到任何正数（对应于 flex-grow 属性），最后一行将以超级丑陋的方式拉伸。其余的项目表现得相当好，但最后一行应该保持与其余项目相同的大小。

我该怎么办才能解决这个问题？


解决方案

这是目前无法通过CSS Flexbox表达的内容。有人基本上询问了CSS工作组的这个确切问题邮件列表几天前，和响应是：目前，不，这是不可能的，尽管这是Flexbox 2的一个高优先级项目。

您可能会破解一些类似你可以使用 max-width 来阻止flex项目（特别是最后一行）的增长，这是一个你的plunk的分叉版本，非零弹性增长， max-width：10em 。

（我可以任意选择 10em ;也可以使用 max-width：calc（100％/ 5），如果你想确保每个弹性项目不超过线条的1/5，例如。）

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;
}

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?

解决方案

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.

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.

(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屋！