Re: [css3-flexbox] Flexbox issues

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Thursday, April 15, 2010 12:47 PM
To: "L. David Baron" <dbaron@dbaron.org>
Cc: "www-style list" <www-style@w3.org>
Subject: Re: [css3-flexbox] Flexbox issues

> On Thu, Apr 15, 2010 at 12:41 PM, Tab Atkins Jr. <jackalmage@gmail.com> 
> wrote:
>> On Thu, Apr 15, 2010 at 11:26 AM, Tab Atkins Jr. <jackalmage@gmail.com> 
>> wrote:
>>> Separate issue!
>>>
>>> box-orient and box-lines appear to be part of the basic concept of
>>> "what type of flow model is this"?  As well, it doesn't look like
>>> they'd ever be the sort of thing you might change on a box.  You'll
>>> set them alongside the display:box declaration as an atomic unit.
>>> This suggests to me that these can be usefully combined together, and
>>> just expressed in the display value.
>>>
>>> Andrew happens to do this already, with his four values for flow,
>>> 'vertical', 'vertical-flow', 'horizontal', and 'horizontal-flow'.  I'd
>>> probably use *-wrap for the wrapping versions, but whatever.
>>>
>>> The only problem with this is that Flexbox has *four* values for
>>> box-orient; two physical and two writing-mode-oriented.  Are the
>>> latter two very important?  Are they, or something similar, used in
>>> XUL currently?
>>
>> Additionally, how are box-direction and box-ordinal-group used in XUL?
>>  Trying to get a feel for the actual use-cases for these features.  I
>> wouldn't have come up with either of them if I was designing them on
>> my own.  ^_^
>>
>
> box-flex-group too.  You can fake this with flex units, if necessary,
> by just setting very large flex values on some elements, and ordinary
> flex values on other elements.
>
> ..one { width: 1000000fl; } .two { width: 1fl; }
>
> should act virtually identical to:
>
> ..one { box-flex: 1; box-flex-group: 1; } .two { box-flex: 1;
> box-flex-group: 2; }
>
> Is this commonly used in XUL things?  If so, are more than two levels
> commonly used?  If it's very rare to use more than two levels, I think
> I'd be fine with the "very large flex" hack, but not if it was somehow
> common for there to be 3 or more groups.
>

Flex box groups are, indeed, very hard to understand and so to use right.
In practice people use percents with flexes.

For these rules:

.container { width:800px; flow:horizontal; }
.container > .one { width: 50%; }
.container > .two { width: 3*; }
.container > .three { width: 1*; }

You will have these widths:
.one - 400 px,
.two - 300 px,
.three - 100px.

Percents and lengths are computed before flexes so you will
have two levels of flexibility. That is sufficient, practice shows.
(To be precise: flexes define distribution of space left after percents and
lengths computation).

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Friday, 16 April 2010 03:59:05 UTC