====== Justification Keywords for Alignment ======

---- dataentry  ----
Spec_tags     : css3-align, css3-flexbox
Owner_tags    : fantasai
Status_tags   : Closed
Added_dt      : 2012-05-16
Action        : Pick proposal A, B, or C
Issue_urls    : http://lists.w3.org/Archives/Public/www-style/2012May/0554.html
Proposal_urls : 
Agenda_urls   :  #If this is part of an ordered series of related topics, e.g. LC issues, use this to link to the supertopic agenda
----

=== RESOLVED ===

The WG resolved to go with another option brought up during the call, and use 'space-between' and 'space-around' for the "Edges flush" and "Equal margins" cases, respectively.

=== Background ===

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 */''


=== Problem Statement ===

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(s) ===

There are several proposals for distinguishing "edges flush" vs. "equal margins" behavior:

  ; 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''

=== Links to More Info ===

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