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

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 UTC