Re: [css3-flexbox] flex-pack distribute bikeshed

On Thu, Sep 15, 2011 at 2:28 PM, Ojan Vafai <ojan@chromium.org> wrote:
> On Thu, Sep 15, 2011 at 2:23 PM, Tab Atkins Jr. <jackalmage@gmail.com>
> wrote:
>> On Thu, Sep 15, 2011 at 2:18 PM, Ojan Vafai <ojan@chromium.org> wrote:
>> > On Thu, Sep 15, 2011 at 2:04 PM, Tab Atkins Jr. <jackalmage@gmail.com>
>> > wrote:
>> >> On Wed, Sep 14, 2011 at 4:07 PM, Ojan Vafai <ojan@chromium.org> wrote:
>> >> > I understand the desire to use distribute for flex-pack since it can
>> >> > be
>> >> > vertical as well, but I think justify is a more well understood term
>> >> > and
>> >> > I
>> >> > don't foresee people finding the concept of justifying vertically
>> >> > confusing.
>> >> > The meaning is obvious.
>> >> > WebKit already implemented it with 'justify' based on the previous
>> >> > state
>> >> > of
>> >> > the spec and I'm loathe to change the name to something that's IMO
>> >> > more
>> >> > confusing.
>> >>
>> >> So, I looked back at my commit history, and that change shows up with
>> >> the commit message "Change flex-pack:justify to distribute, to match
>> >> Grid.".  Grid has no such thing.  Thus, I'm pretty sure I was on crack
>> >> at the time.
>> >>
>> >> I think Fantasai may have suggested changing it, because it's not
>> >> exactly the same as justification.  Text justification only triggers
>> >> when the text is "close enough" to a full line, while
>> >> flex-pack:distribute always triggers.
>> >
>> > I hadn't thought of the wrapping case. I think we want the same behavior
>> > as
>> > text justification here as well. The use-case I have in mind is a
>> > toolbar
>> > that wraps:
>> > <button><button><input
>> > style="width:flex(1);min-width:100px;max-width:200px"><button><button>
>>
>> > So, you have two non-flexing buttons on either side of an input that
>> > flexes,
>> > but when you make the container small, you want the buttons to wrap,
>> > instead
>> > of overflow.
>>
>> > justify:
>> > button button input
>> > button button
>>
>> > distribute:
>> > button button input
>> > button       button
>>
>> > The justify behavior is clearly what you want in this use-case. Is there
>> > a
>> > multiline case where you actually want the distribute behavior?
>>
>> I think you're obscuring the details of that case with your spacing.
>> Do you really want this?
>>
>> justify:
>> +---------------------------+
>> |button     button     input|
>> |button button              |
>> +---------------------------+
>>
>> I highly doubt this is desirable.  It only looked good in your example
>> above because  they were packed tightly already.
>
> But the distribute case seems even worse IMO. Is there a use-case for it?

Oh man, really?  I think this is a lot better than the justification example:

distribute:
+---------------------------+
|button     button     input|
|button               button|
+---------------------------+

I mean, neither one's very great, but the justify seems *really* bad
here.  The distribute case looks way better when the last line has
more than two entries in it:

justify:
+--------------------------------------------------------+
|button    button    button    button    button    button|
|button button button button                             |
+--------------------------------------------------------+

distribute:
+--------------------------------------------------------+
|button    button    button    button    button    button|
|button           button          button           button|
+--------------------------------------------------------+

I think justify is just *horrid* here.  Ideally you'd like it to look
something like this:

flexgrid:
+--------------------------------------------------------+
|button    button    button    button    button    button|
|button    button    button    button                    |
+--------------------------------------------------------+

(We're debating behavior at this point, not naming.  We can use the
'distribute' behavior and call it 'justify', or vice versa.)

> I guess in practice, people mostly won't be using distribute/justify with
> multiline, but when they do, the justify behavior seems better to me, at
> least for the toolbar use-case above.

Yeah, distribute and multiline aren't great together.  You *really*
want a flexgrid, which is on my pile of things to work on, somewhere
near the bottom.  In some simple cases it's okay, though.  For
example, making a multiline flexbox where you know there will be only
two items per line.  Three per line will probably be okay most of the
time, too.

~TJ

Received on Thursday, 15 September 2011 21:49:21 UTC