Re: [css3-flexbox] multiline

>
>-----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 
>be
>easier to decide when we see some use examples.

Consider this:
<div>
  <h1>Header1</h1>
  <p>first</p> <p>second</p>
</div>
<div>
  <h1>Header2</h1>
  <p>first</p> <p>second</p>
  <p>third</p>
</div>

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:
http://terrainformatica.com/w3/horizontal-flow-clear.png

>
>> 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
case)

-- 
Andrew Fedoniouk

http://terrainformatica.com

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