Re: [css-flexbox] Allow specifying when wrapping should happen

I think the "page-break-before" property should already provide this
behavior, as described here:
 http://dev.w3.org/csswg/css-flexbox-1/#algo-line-break

(However I'm not sure where this is implemented.  I know Gecko/Firefox
supports "page-break-before" (& -after) in this context, but one of my
testcases [1] seems to show that it doesn't work in IE 11 or Chrome 41.

Testcase URL:
https://mxr.mozilla.org/mozilla-central/source/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001a.html

Should look like:
https://mxr.mozilla.org/mozilla-central/source/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001-ref.html
)

On 01/17/2015 08:44 PM, Glen Huang wrote:
> Currently, whether a new flex line should be created in a multi-line
> flex container is controlled by the flex container’s width and flex
> item’s width (in the case where the main axis is horizontal, but vice
> versa).
> 
> I’d like to propose an property to let users explicitly specify that.
> The main use case is for definition lists.
> 
> ```
> <dl>
> <dt>Very Long Term</dt>
> <dd>Description</dd>
> <dt>Term</dt>
> <dd>Description</dd>
> <dt>Term</dt>
> <dd>Very Long Description</dd>
> </dl>
> ```
> 
> The goal is to have the browser render it like this:
> 
> ```
> - - - - - - - - - - - - - - -
> Very Long Term    Description
> Term              Description
> Term    Very Long Description
> - - - - - - - - - - - - - - -
> ```
> 
> If I’m not wrong, this is currently impossible to do with flex layout.
> So I’m proposing a property that works very much like what `clear` does
> to floats.
> 
> Actually, I think `clear` can be reused:
> 
> ```
> clear: previous
> clear: next
> ```
> 
> It applies to flex items, and what it does is that it prevents the flex
> item’s previous or next flex items to be in the same flex line.
> 
> So to render the previous definition list, css could be something like:
> 
> ```
> dl {
> display: flex;
> flex-flow: row wrap;
> }
> dd {
> margin-left: auto;
> clear: next;
> }
> ```
> 
> And even better, it could nicely render multiple `dd`s:
> 
>  ```
> <dl>
> <dt>Very Long Term</dt>
> <dd>Description</dd>
> <dd>Another Description</dd>
> <dt>Term</dt>
> <dd>Description</dd>
> </dl>
> ```
> 
> ```
> - - - - - - - - - - - - - - -
> Very Long Term    Description
>           Another Description
> Term              Description
> - - - - - - - - - - - - - - -
> ```
> 
> Any ideas?
> 
>

Received on Sunday, 18 January 2015 17:12:12 UTC