Re: [css3-flexbox] intuitivity and width computation rules

On 1/12/11 8:45 PM, Rob Crowther wrote:
> In my own case, what I was aiming for was five items:
>
> W | 2Fx | Fx | Fx
>
> Where W is fixed width (in pixels), and 2Fx is twice as wide as the two
> Fx columns, and the whole thing, including margins and padding on each
> element, would fit exactly inside a container which fills the width of
> the body.

Seems like styles like this should do it:

     #W { width: 200px; }
     .TwoFx { width: calc(0.5 * (100% - 200px)); }
     .Fx { width: calc(0.25 * (100% - 200px)); }

Now there's an implementation issue here: Gecko doesn't actually do 
anything with percentage widths on flexboxes.  But perhaps it should?  I 
haven't looked at what the spec has to say about this.

> If I explicitly set widths on 2Fx and Fx of 50% and 25% then in works in
> Chromium but still gets out of whack in Firefox (which is possibly a
> Firefox bug? I need to investigate a bit more).

Were they boxes?  If so, see above.

> After some experimentation today I think I can get the layout I want
> using display: table, but that means adding an extra wrapper element in
> to support the display: table-row. What I was hoping for, which I admit
> was a partly uninformed hope, was that flexboxes would give table-row ->
> table-cell like fitting properties without having to add extra markup.

I'm not sure I follow.  You have the container already, right?  So you 
could just style that as a table and the things inside as cells....

That runs us into into the various weirdness with table layout, though. 
  _That_ I'm not sure most people can explain sanely, and it's 
definitely not compatible across browsers.  I definitely can't explain it.

-Boris

Received on Thursday, 13 January 2011 02:43:08 UTC