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

On Mon, Jan 12, 2015 at 9:53 AM, Jared Wein <jaws@mozilla.com> wrote:
> On Mon, Jan 12, 2015 at 12:39 PM, Tab Atkins Jr. <jackalmage@gmail.com>
> wrote:
>>
>> On Fri, Jan 9, 2015 at 3:42 PM, Jared Wein <jaws@mozilla.com> wrote:
>> > Hi www-style,
>> >
>> > dev.w3.org/csswg/css-flexbox-1/#flex-lines example 9 shows four flex
>> > items
>> > that have flex-grow:1; inside of a container that has flex-wrap:wrap;
>> > applied.
>> >
>> > I have recreated the example locally, but I would like to alter it so
>> > that
>> > if the container resizes and forces its last child element to wrap to a
>> > line
>> > of its own, that the element will not grow to the full width of the
>> > line.
>> >
>> > As ASCII art, this is the desired outcome when the container is wide
>> > enough
>> > to fit all children on a single line:
>> > -----------------------------------
>> > |[   AAA   ][   BBB   ][   CCC   ]|
>> > |                                 |
>> > -----------------------------------
>> >
>> > This is the desired outcome when the container is too narrow to fit all
>> > children on a single line:
>> > ----------------------------
>> > |[    AAA    ][    BBB    ]|
>> > |[CCC]                     |
>> > ---------------------------|
>> >
>> > Is this type of layout possible with display:flex or a different layout
>> > algorithm?
>>
>> At the moment, no, this is not possible.  This is a high-priority item
>> for Flexbox 2, though: <https://wiki.csswg.org/spec/css-flexbox-2>
>
> Thanks. I should note that another desired result would be the following:
>
> ----------------------------
> |[    AAA    ][    BBB    ]|
> |[    CCC    ]             |
> ---------------------------|

That is, in fact, approximately what you'll get with my suggested
feature.  (It'll spam "phantom" items on the last line of the same
size as the last item, do stretching with them, then remove them for
rendering.  If AAA, BBB, and CCC are all approximately the same size,
then CCC will end up approximately the same size as AAA on the
previous line.)

~TJ

Received on Monday, 12 January 2015 18:04:56 UTC