Update spec and diagrams with the new flex-start/flex-end keywords, per WG decision.

Author: tabatkins

css3-flexbox/Overview.html

@@ -40,11 +40,11 @@
 
    <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 31 May 2012</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 1 June 2012</h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120531/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120531/</a>-->
+     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120601/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120601/</a>-->
 
 
     <dd><a
@@ -1898,7 +1898,7 @@ <h3 id=justify-content-property><span class=secno>8.2. </span> Axis
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>start | end | center | space-between | space-around
+     <td>flex-start | flex-end | center | space-between | space-around
 
     <tr>
      <th>Initial:
@@ -1949,8 +1949,8 @@ <h3 id=justify-content-property><span class=secno>8.2. </span> Axis
    over the alignment of items when they overflow the line.
 
   <dl>
-   <dt><dfn id=justify-content-start>‘<code class=css>start</code>’</dfn>
-    
+   <dt><dfn id=justify-content-flex-start>‘<code
+    class=css>flex-start</code>’</dfn>
 
    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the
     start of the line. The <a href="#main-start"><i>main-start</i></a> margin
@@ -1959,7 +1959,8 @@ <h3 id=justify-content-property><span class=secno>8.2. </span> Axis
     of the line, and each subsequent <a href="#flex-item"><i>flex
     item</i></a> is placed flush with the preceding item.
 
-   <dt><dfn id=justify-content-end>‘<code class=css>end</code>’</dfn>
+   <dt><dfn id=justify-content-flex-end>‘<code
+    class=css>flex-end</code>’</dfn>
 
    <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the end
     of the line. The <a href="#main-end"><i>main-end</i></a> margin edge of
@@ -1987,8 +1988,8 @@ <h3 id=justify-content-property><span class=secno>8.2. </span> Axis
    <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in
     the line. If the leftover free-space is negative or there is only a
     single <a href="#flex-item"><i>flex item</i></a> on the line, this value
-    is identical to ‘<a href="#align-content-start"><code
-    class=css>start</code></a>’. Otherwise, the <a
+    is identical to ‘<a href="#align-content-flex-start"><code
+    class=css>flex-start</code></a>’. Otherwise, the <a
     href="#main-start"><i>main-start</i></a> margin edge of the first <a
     href="#flex-item"><i>flex item</i></a> on the line is placed flush with
     the <a href="#main-start"><i>main-start</i></a> edge of the line, the <a
@@ -2039,7 +2040,7 @@ <h3 id=align-items-property><span class=secno>8.3. </span> Cross-axis
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>start | end | center | baseline | stretch
+     <td>flex-start | flex-end | center | baseline | stretch
 
     <tr>
      <th>Initial:
@@ -2088,7 +2089,7 @@ <h3 id=align-items-property><span class=secno>8.3. </span> Cross-axis
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>auto | start | end | center | baseline | stretch
+     <td>auto | flex-start | flex-end | center | baseline | stretch
 
     <tr>
      <th>Initial:
@@ -2154,13 +2155,15 @@ <h3 id=align-items-property><span class=secno>8.3. </span> Cross-axis
    alignments are defined as:
 
   <dl>
-   <dt><dfn id=align-items-start>‘<code class=css>start</code>’</dfn>
+   <dt><dfn id=align-items-flex-start>‘<code
+    class=css>flex-start</code>’</dfn>
 
    <dd> The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
     <a href="#flex-item"><i>flex item</i></a> is placed flush with the <a
     href="#cross-start"><i>cross-start</i></a> edge of the line.
 
-   <dt><dfn id=align-items-end>‘<code class=css>end</code>’</dfn>
+   <dt><dfn id=align-items-flex-end>‘<code
+    class=css>flex-end</code>’</dfn>
 
    <dd> The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a
     href="#flex-item"><i>flex item</i></a> is placed flush with the <a
@@ -2180,8 +2183,8 @@ <h3 id=align-items-property><span class=secno>8.3. </span> Cross-axis
    <dd>
     <p> If the <a href="#flex-item"><i>flex item's</i></a> inline axis is the
      same as the <a href="#cross-axis"><i>cross axis</i></a>, this value is
-     identical to ‘<a href="#align-content-start"><code
-     class=css>start</code></a>’.
+     identical to ‘<a href="#align-content-flex-start"><code
+     class=css>flex-start</code></a>’.
 
     <p> Otherwise, it participates in baseline alignment: all participating
      <a href="#flex-item"><i>flex items</i></a> on the line are aligned such
@@ -2263,7 +2266,8 @@ <h3 id=align-content-property><span class=secno>8.4. </span> The ‘<a
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>start | end | center | space-between | space-around | stretch
+     <td>flex-start | flex-end | center | space-between | space-around |
+      stretch
 
     <tr>
      <th>Initial:
@@ -2310,15 +2314,17 @@ <h3 id=align-content-property><span class=secno>8.4. </span> The ‘<a
    within the <i>main-axis</i>:
 
   <dl>
-   <dt><dfn id=align-content-start>‘<code class=css>start</code>’</dfn>
+   <dt><dfn id=align-content-flex-start>‘<code
+    class=css>flex-start</code>’</dfn>
 
    <dd> Lines are packed toward the start of the flex container. The <a
     href="#cross-start"><i>cross-start</i></a> edge of the first line in the
     flex container is placed flush with the <a
     href="#cross-start"><i>cross-start</i></a> edge of the flex container,
     and each subsequent line is placed flush with the preceding line.
 
-   <dt><dfn id=align-content-end>‘<code class=css>end</code>’</dfn>
+   <dt><dfn id=align-content-flex-end>‘<code
+    class=css>flex-end</code>’</dfn>
 
    <dd> Lines are packed toward the end of the flex container. The <a
     href="#cross-end"><i>cross-end</i></a> edge of the last line is placed
@@ -2345,9 +2351,10 @@ <h3 id=align-content-property><span class=secno>8.4. </span> The ‘<a
    <dd> Lines are evenly distributed in the flex container. If the leftover
     free-space is negative or there is only a single line in the flex
     container, this value is identical to ‘<a
-    href="#align-content-start"><code class=css>start</code></a>’.
-    Otherwise, the <a href="#cross-start"><i>cross-start</i></a> edge of the
-    first line in the flex container is placed flush with the <a
+    href="#align-content-flex-start"><code
+    class=css>flex-start</code></a>’. Otherwise, the <a
+    href="#cross-start"><i>cross-start</i></a> edge of the first line in the
+    flex container is placed flush with the <a
     href="#cross-start"><i>cross-start</i></a> content edge of the flex
     container, the <a href="#cross-end"><i>cross-end</i></a> edge of the last
     line in the flex container is placed flush with the <a
@@ -2372,9 +2379,9 @@ <h3 id=align-content-property><span class=secno>8.4. </span> The ‘<a
 
    <dd> Lines stretch to take up the remaining space. If the leftover
     free-space is negative, this value is identical to ‘<a
-    href="#align-content-start"><code class=css>start</code></a>’.
-    Otherwise, the free-space is split equally between all of the lines,
-    increasing their cross size.
+    href="#align-content-flex-start"><code
+    class=css>flex-start</code></a>’. Otherwise, the free-space is split
+    equally between all of the lines, increasing their cross size.
   </dl>
 
   <p class=note> Note: Only flex containers with multiple lines ever have
@@ -2961,11 +2968,10 @@ <h3 id=pagination-algo><span class=secno>10.1. </span> Sample Flex
      <ol>
       <li> Run the entire flex layout algorithm (without regards to
        pagination), except treat any ‘<a href="#align-self"><code
-       class=property>align-self</code></a>’ other than ‘<a
-       href="#align-content-start"><code class=css>start</code></a>’ or
-       ‘<a href="#align-items-baseline"><code
-       class=css>baseline</code></a>’ as ‘<a
-       href="#align-content-start"><code class=css>start</code></a>’.
+       class=property>align-self</code></a>’ other than ‘<code
+       class=css>start</code>’ or ‘<a href="#align-items-baseline"><code
+       class=css>baseline</code></a>’ as ‘<code
+       class=css>start</code>’.
 
       <li> If an unbreakable item doesn't fit within the space left on the
        page, and the flex container is not at the top of the page, move the
@@ -2987,9 +2993,8 @@ <h3 id=pagination-algo><span class=secno>10.1. </span> Sample Flex
        its finish. For all fragments besides the first, treat ‘<a
        href="#align-self"><code class=property>align-self</code></a>’ and
        ‘<a href="#align-content"><code
-       class=property>align-content</code></a>’ as being ‘<a
-       href="#align-content-start"><code class=css>start</code></a>’ for
-       all item fragments and lines.
+       class=property>align-content</code></a>’ as being ‘<code
+       class=css>start</code>’ for all item fragments and lines.
 
       <li> If any item, when aligned according to its original ‘<a
        href="#align-self"><code class=property>align-self</code></a>’ value
@@ -3312,7 +3317,8 @@ <h2 class=no-num id=property>Property index</h2>
     <tr>
      <th><a class=property href="#align-content">align-content</a>
 
-     <td>start | end | center | space-between | space-around | stretch
+     <td>flex-start | flex-end | center | space-between | space-around |
+      stretch
 
      <td>stretch
 
@@ -3327,7 +3333,7 @@ <h2 class=no-num id=property>Property index</h2>
     <tr>
      <th><a class=property href="#align-items">align-items</a>
 
-     <td>start | end | center | baseline | stretch
+     <td>flex-start | flex-end | center | baseline | stretch
 
      <td>stretch
 
@@ -3342,7 +3348,7 @@ <h2 class=no-num id=property>Property index</h2>
     <tr>
      <th><a class=property href="#align-self">align-self</a>
 
-     <td>auto | start | end | center | baseline | stretch
+     <td>auto | flex-start | flex-end | center | baseline | stretch
 
      <td>auto
 
@@ -3470,7 +3476,7 @@ <h2 class=no-num id=property>Property index</h2>
     <tr>
      <th><a class=property href="#justify-content">justify-content</a>
 
-     <td>start | end | center | space-between | space-around
+     <td>flex-start | flex-end | center | space-between | space-around
 
      <td>start
 
@@ -3574,11 +3580,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>definite size, <a href="#definite-size"
     title="definite size"><strong>9.</strong></a>
 
-   <li>‘<a href="#align-content-end"><code class=css>end</code></a>’, <a
-    href="#align-content-end" title="''end''"><strong>8.4.</strong></a>, <a
-    href="#align-items-end" title="''end''"><strong>8.3.</strong></a>, <a
-    href="#justify-content-end" title="''end''"><strong>8.2.</strong></a>
-
    <li>flex, <a href="#display-flex" title=flex><strong>3.</strong></a>, <a
     href="#flex" title=flex><strong>7.1.</strong></a>
 
@@ -3594,6 +3595,14 @@ <h2 class=no-num id=index>Index</h2>
    <li>flex-direction, <a href="#flex-direction"
     title=flex-direction><strong>5.1.</strong></a>
 
+   <li>‘<a href="#align-content-flex-end"><code
+    class=css>flex-end</code></a>’, <a href="#align-content-flex-end"
+    title="''flex-end''"><strong>8.4.</strong></a>, <a
+    href="#align-items-flex-end"
+    title="''flex-end''"><strong>8.3.</strong></a>, <a
+    href="#justify-content-flex-end"
+    title="''flex-end''"><strong>8.2.</strong></a>
+
    <li>flex-flow, <a href="#flex-flow"
     title=flex-flow><strong>5.3.</strong></a>
 
@@ -3618,6 +3627,14 @@ <h2 class=no-num id=index>Index</h2>
    <li>flex-shrink, <a href="#flex-shrink"
     title=flex-shrink><strong>7.3.2.</strong></a>
 
+   <li>‘<a href="#align-content-flex-start"><code
+    class=css>flex-start</code></a>’, <a href="#align-content-flex-start"
+    title="''flex-start''"><strong>8.4.</strong></a>, <a
+    href="#align-items-flex-start"
+    title="''flex-start''"><strong>8.3.</strong></a>, <a
+    href="#justify-content-flex-start"
+    title="''flex-start''"><strong>8.2.</strong></a>
+
    <li>flex-wrap, <a href="#flex-wrap"
     title=flex-wrap><strong>5.2.</strong></a>
 
@@ -3694,13 +3711,6 @@ <h2 class=no-num id=index>Index</h2>
     href="#justify-content-space-between"
     title="''space-between''"><strong>8.2.</strong></a>
 
-   <li>‘<a href="#align-content-start"><code class=css>start</code></a>’,
-    <a href="#align-content-start"
-    title="''start''"><strong>8.4.</strong></a>, <a href="#align-items-start"
-    title="''start''"><strong>8.3.</strong></a>, <a
-    href="#justify-content-start" title="''start''"><strong>8.2.</strong></a>
-    
-
    <li>‘<a href="#align-content-stretch"><code
     class=css>stretch</code></a>’, <a href="#align-content-stretch"
     title="''stretch''"><strong>8.4.</strong></a>, <a