Re: Flex items growing unless they wrap to a line of their own

On Tue, Jan 13, 2015 at 4:44 AM, Sebastian Zartner
<sebastianzartner@gmail.com> wrote:
> On 12 January 2015 at 20:02, fantasai <fantasai.lists@inkedblade.net> wrote:
>> On 01/12/2015 09:53 AM, Jared Wein wrote:
>>>
>>>
>>> Thanks. I should note that another desired result would be the following:
>>>
>>> ----------------------------
>>> |[    AAA    ][    BBB    ]|
>>> |[    CCC    ]             |
>>> ---------------------------|
>>
>>
>> We're also in the process of adding a few features to CSS Grid that should
>> make this layout fairly easy.
>
> I believe the latter use case really fits more to CSS Grid and CSS
> Flexbox should just allow to not stretch the last element at all like
> in Jared's first example.

No, it's not just a Grid thing.  If all your items are the *same* size
and thus line up on a grid, sure, Grid makes sense.  (And as soon as
we have the repeat(auto) function, it'll work well, as fantasai
alludes to.)  But there's nothing about this use-case that requires
them all to be the same size.  For example, I maintain a recipes app
at <http://www.xanthir.com/recipes/> which uses Flexbox to lay out the
list of recipes.  This is definitely not a grid, but it would still
benefit from something that made the elements on the last line flex
"about as much" as the elements on previous lines (rather than, as
they currently do, often flexing a lot more, due to less items on the
last line).  My described plan accomplishes this.

> If it's really desired to also stretch the last element to some
> extend, then I think instead of using "phantom" items the width of the
> first element of the second to last line should be used. I.e. in the
> example this would be the width of AAA.

I don't understand why this would be better.  Any arbitrary item would
work equally well; using the last one just simplifies things.  If
you're saying we should use the *laid-out size* of an item on the
previous line, the point is to do flexing while pretending there were
enough items on the line to roughly fill it; using already-flexed
items doesn't help here.

~TJ

Received on Tuesday, 13 January 2015 20:40:35 UTC