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

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

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Wed, 9 Jun 2010 06:21:55 +0000
To: Andrew Fedoniouk <news@terrainformatica.com>, Tab Atkins Jr. <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
Message-ID: <5258A1A783764C478A36E2BC4A9C497E17D17C39@tk5ex14mbxc106.redmond.corp.microsoft.com>
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.

> -----Original Message-----
> From: Andrew Fedoniouk [mailto:news@terrainformatica.com]
> Sent: Tuesday, June 08, 2010 10:50 PM
> To: Alex Mogilevsky; Tab Atkins Jr.
> Cc: www-style list
> Subject: Re: is there any implementation of box-lines:multiple?
> 
> 
> 
> --------------------------------------------------
> From: "Alex Mogilevsky" <alexmog@microsoft.com>
> Sent: Tuesday, June 08, 2010 9:40 PM
> To: "Tab Atkins Jr." <jackalmage@gmail.com>
> Cc: "www-style list" <www-style@w3.org>
> Subject: RE: is there any implementation of box-lines:multiple?
> 
> > I want to figure "box-align:stretch" is supposed to in multiline
> > situation. Current spec says
> >
> > # If box-align is stretch, then each line is stretched equally, and
> > the elements # within each line are stretched to the size of the
> > largest item in that line.
> >
> > "stretched equally" can mean a lot of things. One way to stretch is to
> > apply "box-flex:1" to height or width of each line box. That would be
> > cool and logical in a flex-box, but it would be a new use of
> > flexibility and can have a lot of subtle details.
> >
> > Any ideas?
> 
> Here
> 
> http://terrainformatica.com/w3/box-align-stretch.png

> 
> is how box-align:stretch can be made with flex units.
> 
> Key point there is this:
> 
>    border-spacing: 1* 10px; /* "springs" between elements */
> 
> Vertical spacing between rows is 10px and horizontal space between
> elements is 1 flex so elements are spread equally in each rows.
> 
> The document that you can try with the demo browser from previous
> message is this:
> 
> <html>
>   <head>
>     <style>
> 
>       div.horizontal
>       {
>         flow: horizontal-flow; /* multiple rows */
>         border-spacing: 1* 10px; /* "springs" between elements */
>       }
> 
>       div.horizontal > div
>       {
>         border:1px solid brown;
>         width: 100px;
>       }
> 
>     </style>
>   </head>
> <body>
>   box-align:stretch with flexes:
>   <div class="horizontal">
>     <div>111</div>
>     <div>222</div>
>     <div>333</div>
>     <div>444</div>
>     <div>555</div>
>   </div>
> </body>
> </html>
> 
> --
> Andrew Fedoniouk
> 
> http://terrainformatica.com

> 
> 
> >
> >> -----Original Message-----
> >> From: Tab Atkins Jr. [mailto:jackalmage@gmail.com]
> >> Sent: Tuesday, June 08, 2010 12:38 PM
> >> To: Alex Mogilevsky
> >> Cc: www-style list
> >> Subject: Re: is there any implementation of box-lines:multiple?
> >>
> >> On Tue, Jun 8, 2010 at 12:33 PM, Alex Mogilevsky
> >> <alexmog@microsoft.com>
> >> wrote:
> >> > I think somebody mentioned it here but I can’t find it. I see
> >> > “-webkit-box-lines” mentioned in some references but I failed to
> >> > make it do anything so far…
> >>
> >> No, no one implements multiple-line flexboxes yet.
> >>
> >> ~TJ
> >
> >

Received on Wednesday, 9 June 2010 06:22:51 GMT

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