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

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.

~TJ

Received on Thursday, 15 September 2011 21:23:53 UTC