This is an old revision of the document!
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:
distribute
value of text-justify
means “edges flush”, which is inconsistent.We need keywords (or at least two, really, since only two are wanted) that clearly and unambiguously specify each of the behaviors.
justify
vs. distribute
distribute
vs. distribute-space
distribute-flush
vs. distribute-space