W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: [css3-flexbox] multiline

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Fri, 15 Apr 2011 20:15:57 -0700
Message-ID: <BLU159-ds178F87A5D363C436CBBDFFF8AF0@phx.gbl>
To: "Alex Mogilevsky" <alexmog@microsoft.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style list" <www-style@w3.org>
>-----Original Message----- 
>From: Alex Mogilevsky
>Sent: Thursday, April 14, 2011 11:10 PM
>To: Andrew Fedoniouk ; Tab Atkins Jr.
>Cc: www-style list
>Subject: RE: [css3-flexbox] multiline
>Multiline flexbox was not proposed by IE, we just were first to try it...
>We don't really know what kind of use cases will require row breaks. Will 
>easier to decide when we see some use examples.

Consider this:
  <p>first</p> <p>second</p>
  <p>first</p> <p>second</p>

The desire is to see <p>'s in rows by two and of the same width and height.
This is made by using these styles:

div { flow:horizontal-flow; }
div h1 { clear:both; width:1*; }
div p { size:1*; border:1px solid; }
div p:nth-child(2n) { clear:after; }

Here is the rendering:

>> I suggest to use 'clear' for that.  'clear' breaks float rows and so it
>> can be used for exactly the same purposes in flexboxes (that cannot
>> contain floats directly anyway).
>Interesting idea. It is best to avoid reusing properties unless there is an
>exact match. 'clear' has multiple values without obvious mapping to
>flexbox... In this case a new property would work better.

flow:horizontal-flow; in my interpretation define directionality
of the flow up to sign precision.
flow:horizontal-flow honors direction:ltr|rtl; in the same way as
tables do.

So all values of 'clear' are used as they are. Simply because

  section { flow:horizontal-flow; } is a [better] variant of

  section > * { float:left|right; }

The only conceptual difference is a use of flexes (against row boxes in my

Andrew Fedoniouk

Received on Saturday, 16 April 2011 03:16:28 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC