[css-flexbox] Allow specifying when wrapping should happen

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 04:44:56 UTC