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: Tue, 8 Jun 2010 22:50:23 -0700
Message-ID: <223B54BF780244A8AA40DBDDA239A0D1@terra3>
To: "Alex Mogilevsky" <alexmog@microsoft.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style list" <www-style@w3.org>


--------------------------------------------------
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 05:50:55 GMT

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