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

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

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 9 Jun 2010 20:58:09 -0700
Message-ID: <2B296878D2F8460999EDDDB06F0C18FC@terra3>
To: "Tab Atkins Jr." <jackalmage@gmail.com>, "Alex Mogilevsky" <alexmog@microsoft.com>
Cc: "www-style list" <www-style@w3.org>


--------------------------------------------------
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:28 GMT