Re: is there any implementation of box-lines:multiple?

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Wednesday, June 09, 2010 9:34 AM
To: "Alex Mogilevsky" <alexmog@microsoft.com>
Cc: "Andrew Fedoniouk" <news@terrainformatica.com>; "www-style list" 
<www-style@w3.org>
Subject: Re: is there any implementation of box-lines:multiple?

> On Tue, Jun 8, 2010 at 11:21 PM, Alex Mogilevsky <alexmog@microsoft.com> 
> wrote:
>> Interesting. But I was actually interested in understanding the current 
>> spec (last updated July 2009) 
>> http://dev.w3.org/csswg/css3-flexbox/#multiple-alignment and Tab's draft 
>> http://www.xanthir.com/:wih#section1.5.0 . They are somewhat 
>> contradictory on this issue, and I don't think either is a good solution.
>
> My proposal contradicts the current spec only by accident - I missed
> that line that they're all stretched equally, and so just wrote
> something I thought was reasonable.
>
> I suspect that "stretched equally" is meant to be equivalent to the
> behavior of * rows/cols in Template - they're all equal to the
> height/width of the largest row/col.
>
> We've currently got "all rows are the height of the tallest element in
> the entire flexbox" (current draft) and "each row is the height of the
> tallest element in that row" (my proposal).  I'm not certain that
> there's a a 3rd solution.  Any ideas?
>

Third solution is to include v-margins of children into row box.
So row's height is height of tallest margin-box.

Speaking about my implementation where flexes may appear in
margin/padding/border/width/height...

flow: horizontal-flow defines flexible layout with row wrapping.
Height of the row is a height of tallest element (height of its margin-box).
Row height (row box) is calculated with all vertical flex values interpreted
as 'auto'. Vertical flexes of elements in the row are computed against
that row box.

So if all children will use followings
- height: *;  (1fl)  - box-align:stretch;
- margin-top: *; -  box-align:bottom;
- margin-bottom: *; -  box-align:top;
- padding-top: *; -  N/A in Flexbox - elements will span whole height
                                 but their content will be bottom aligned;
- padding-bottom: *; -  N/A in Flexbox - elements will span whole height
                                 but their content will be top aligned;

Value of 'border-spacing-x' on container is collapsed with
inter-element horizontal margins.
Value of 'border-spacing-y' on container defines inter-row spacing.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Thursday, 10 June 2010 03:58:40 UTC