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

Thank you. Didn’t notice the `page-break-before` property.

However, this doesn’t seem like a perfect solution, because it also introduces a page break, which means whenever I’d like to use this layout for definition lists, printing the web page will result in each page containing only one term and one description (or just one description, for multiple descriptions).

I see the fragmentation module introduces breaks for region and multi-column layouts, I wonder if it makes sense to add flex layout to that list? Maybe something like `break-after: flex;`?

> On Jan 19, 2015, at 1:11 AM, Daniel Holbert <dholbert@mozilla.com> wrote:
> 
> 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 Monday, 19 January 2015 07:10:47 UTC