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

Just as idea:

I am using existing 'border-spacing' property to define what
is used below as 'distribute'. As we know 'border-spacing' takes
two lengths: x/y.

'border-spacing-x' on flow:horizontal-flow (wrap) container
defines horizontal distances between children in the row.

So defining
div.rows {
   flow: horizontal-flow;
   border-spacing: * 0; // flexible border-spacing-x
}
will replace children as "distribute" case below:

+------------------------------------+
|{child}                      {child}|


This case is different from

  div.rows > div { margin:0 1*; } // flexible horizontal margins

as border-spacing defines space between two neighbor children.

With flexible margin on children we will get this:

+------------------------------------+
|      {child}        {child}        |

( horizontal margins collapse in my case )

I also found that following is quite useful in multi-row flexes:

1.   ::first-line/ ::last-line pseudo elements that allow to
     override for example border-spacing for the last row.
     For the same purpose as sometimes it is needed for
     text-align: justify.

2.  min/max-width on children of multi-row flex container
     accepts  'min-siblings-width' and 'max-siblings-width'
     values that are computed to width of elements with
     max(min-intrinsic-width) and max(max-intrinsic-width)
     among all immediate children.
     This allows to replace element in rows and aligned to
     columns. See:
     http://terrainformatica.com/w3/sciter-help-system.png
     right side-bar.

--------------
I would split flexbox document in sub-modules that
define different layout managers.
flow: horizontal and horizontal-wrap have enough
differences to treat them separately. But that is just MHO.

-- 
Andrew Fedoniouk

http://terrainformatica.com


-----Original Message----- 
From: Tab Atkins Jr.
Sent: Thursday, September 15, 2011 2:48 PM
To: Ojan Vafai
Cc: www-style@w3.org ; fantasai
Subject: 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 Friday, 16 September 2011 03:41:42 UTC