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

On 13/01/11 00:59, Boris Zbarsky wrote:
> So how about we take a step back. What problem are we trying to solve
> here (not in the spec; the question is what sort of layout behavior we
> are trying to achieve)?
>
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.

It seemed to work OK on my first mockup page, but the whole thing went 
way out of whack on a second page where the only difference was a few 
extra words in the text content of the 2Fx.

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).

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.

Rob

Received on Thursday, 13 January 2011 01:46:02 UTC