W3C home > Mailing lists > Public > www-style@w3.org > May 2012

[css3-align][css3-flexbox] Value keywords for distribution

From: fantasai <fantasai.lists@inkedblade.net>
Date: Wed, 16 May 2012 15:38:44 -0700
Message-ID: <4FB42C74.8030704@inkedblade.net>
To: "www-style@w3.org" <www-style@w3.org>
There are two alignment keywords that distribute items evenly along the flex axis:
'justify' and 'distribute'. One of them aligns the first and last items flush
against the edges, and the other puts space equally around all items.

There's two problems:
   * It's not clear from the names which is which.
   * 'distribute' behaves the opposite of its behavior in 'text-justify' (which
     aligns the first/last characters flush with the edges).

There are actually three possible behaviors you might want:

Edges flush

   |[item]<-------->[item]<-------->[item]|

Equal spacing

   |<--->[item]<--->[item]<--->[item]<--->|

Equal margins

   |<-->[item]<---->[item]<---->[item]<-->|

Note: You can get the equal-margins effect with 'auto' margins, but only
       if you want the minimum spacing to be zero. Which might be sufficient
       for this level, but would be a candidate for future extension.

Related prior art:
   text-justify: distribute;        /* edges flush */
   ruby-align: distribute-letter;   /* edges flush */
   ruby-align: distribute-space;    /* equal margins */
   background-repeat: space;        /* edges flush */

Suggestions?

~fantasai
Received on Wednesday, 16 May 2012 22:39:14 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:54 GMT