W3C home > Mailing lists > Public > www-style@w3.org > May 2010

Re: [css-flexbox] Computation Algorithm

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 10 May 2010 20:33:48 -0700
Message-ID: <AANLkTimjFQ4C5XRc4tbWz7cgK22Gn7SdoPsEa-1Ut6uw@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: www-style@w3.org
On Mon, May 10, 2010 at 8:16 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> Looking on this document in Mozilla:
> http://terrainformatica.com/w3/mozilla-flex-2.htm
> I am getting this rendering:
> http://terrainformatica.com/w3/mozilla-flex-2.png
> Two boxes here are defined as:
> #box2 { box-flex: 1.0; width:200px; background:gold;}
> #box3 { box-flex: 2.0; width:200px; background:red;}
> According to the name of the property ("box-flex") I would expect that box3
> (flex:2) and box2 (flex:1)
> widths will be in proportion 2:1. At least box3 should be wider than box2.
> But in fact box3 is smaller! That is completely unexpected
> as all other properties of these two elements are the same.
> It appears that different values of the 'width' may change
> meaning of 'box-flex'. Larger values of the flex may lead to larger widths -
> proportion A/B. But as we can see larger flexes may lead to smaller widths
> too - suddenly to change to B/A.
> In any case box-flex multiplier appears as completely unpredictable when
> 'width's are expressed in percents.
> Question to authors of the FlexBox proposal:
> what is the motivation to use such an algorithm?
> And yet: if someone would ask to define in one sentence (for dummies)
> meaning of such "box-flex" what would be that sentence? What does it
> mean/flex to be short?

I've tried to explain this multiple times, and the spec for Flexbox
explains it as well.  Let me try one final time, with a few examples.

1) Assume a container, width:300px, with two children, one of them
width:100px and the other width:150px.  Both children have box-flex:1.

100+150 = 250px, so there is 50px of "leftover space" in the box.  The
children have equal box-flex values, so they'll split the leftover
space equally between them.  50px split two ways is 25px each.

So, after allocating the flexible space, the children end up being
125px and 175px wide, exactly filling their parent.

2) Assume a contain, 500px wide, with two children, one of the
width:100px and box-flex:1, the other width:100px and box-flex:2.

100+100=200px, so there's 300px of leftover space.  Splitting up that
space in proportion with the box-flex values means that the first box
gets 100px and the second gets 200px.

So, after allocating te flexible space, the children end up being
200px and 300px wide, exactly filling their parent.

3) Assume a container, 200px wide.  It has two children, one of them
width:100px and the other width:200px.  Both have box-flex: 1.

100+200 = 300, so they are 100px wider than their parent has room for.
 Their box-flex values are equal, so they'll shrink equal amounts,
50px each.

After shrinking the boxes, then, the first box is 50px wide and the
second is 150px wide, exactly filling their parent.

Received on Tuesday, 11 May 2010 03:34:44 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:34 UTC