- From: Glen Huang <curvedmark@gmail.com>
- Date: Sun, 18 Jan 2015 12:44:24 +0800
- To: www-style list <www-style@w3.org>
- Message-Id: <3C16AAF1-BEC6-481A-8372-5A7B8D4E4BD8@gmail.com>
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