Justification Keywords for Alignment

There are three possible behaviors for distributing items evenly along an axis:

Edges flush

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

Equal spacing

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

Equal margins

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

Note: In Flexbox, 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 */

Flexbox currently uses justify to mean “edges flush” and distribute to mean “equal margins”. This has two problems:

• It's unclear from the names which is which.
• The distribute value of text-justify means “edges flush”, which is inconsistent.

We need keywords that clearly and unambiguously specify each of the behaviors (or at least two, really, since only two are wanted).

Proposal 0 (current spec)

justify vs. distribute

Proposal A

distribute vs. distribute-space

Proposal B

distribute-flush vs. distribute-space

Proposal C

distribute vs. space

1. http://www.w3.org/TR/css3-ruby/#rubyalign
2. http://www.w3.org/TR/css3-background/#the-background-repeat
3. http://www.w3.org/TR/css3-text/#text-justify