Move 'flex-align' to the flexbox, add 'flex-item-align' for specific control.

Author: tabatkins

css3-flexbox/Overview.html

@@ -190,8 +190,9 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
       property</a>
 
      <li><a href="#flex-align"><span class=secno>5.2. </span> Cross Axis
-      Alignment: the &lsquo;<code class=property>flex-align</code>&rsquo;
-      property</a>
+      Alignment: the &lsquo;<code class=property>flex-align</code>&rsquo; and
+      &lsquo;<code class=property>flex-item-align</code>&rsquo;
+      properties</a>
     </ul>
 
    <li><a href="#multi-line"><span class=secno>6. </span> Multi-line
@@ -705,8 +706,10 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
    href="#multi-line0"><i>multi-line</i></a>, and the direction of the <a
    href="#cross-axis"><i>cross axis</i></a>, which affects the direction new
    lines are stacked in and the meaning of the &lsquo;<a
-   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo; and
-   &lsquo;<a href="#flex-line-pack0"><code
+   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo;,
+   &lsquo;<a href="#flex-item-align"><code
+   class=property>flex-item-align</code></a>&rsquo;, and &lsquo;<a
+   href="#flex-line-pack0"><code
    class=property>flex-line-pack</code></a>&rsquo; properties.
 
   <dl>
@@ -963,10 +966,11 @@ <h2 id=alignment><span class=secno>5. </span> Alignment</h2>
    &lsquo;<a href="#flex-pack0"><code
    class=property>flex-pack</code></a>&rsquo; and the <a
    href="#cross-axis"><i>cross axis</i></a> with &lsquo;<a
-   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo;.
-   These properties make many common types of alignment trivial, including
-   some things that were very difficult in CSS 2.1, like horizontal and
-   vertical centering.
+   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo; and
+   &lsquo;<a href="#flex-item-align"><code
+   class=property>flex-item-align</code></a>&rsquo;. These properties make
+   many common types of alignment trivial, including some things that were
+   very difficult in CSS 2.1, like horizontal and vertical centering.
 
   <h3 id=flex-pack><span class=secno>5.1. </span> Main Axis Alignment: the
    &lsquo;<a href="#flex-pack0"><code
@@ -1088,7 +1092,9 @@ <h3 id=flex-pack><span class=secno>5.1. </span> Main Axis Alignment: the
 
   <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
    &lsquo;<a href="#flex-align0"><code
-   class=property>flex-align</code></a>&rsquo; property</h3>
+   class=property>flex-align</code></a>&rsquo; and &lsquo;<a
+   href="#flex-item-align"><code
+   class=property>flex-item-align</code></a>&rsquo; properties</h3>
 
   <table class=propdef>
    <tbody>
@@ -1107,6 +1113,44 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
 
      <td>stretch
 
+    <tr>
+     <th>Applies to:
+
+     <td>flexboxes
+
+    <tr>
+     <th>Inherited:
+
+     <td>no
+
+    <tr>
+     <th>Computed Value:
+
+     <td>specified value
+
+    <tr>
+     <th>Media:
+
+     <td>visual
+  </table>
+
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=flex-item-align>flex-item-align</dfn>
+
+    <tr>
+     <th>Value:
+
+     <td>auto | start | end | center | baseline | stretch
+
+    <tr>
+     <th>Initial:
+
+     <td>auto
+
     <tr>
      <th>Applies to:
 
@@ -1128,17 +1172,28 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
      <td>visual
   </table>
 
-  <p>The &lsquo;<a href="#flex-align0"><code
-   class=property>flex-align</code></a>&rsquo; property aligns <a
-   href="#flexbox-item"><i>flexbox items</i></a> in the <a
-   href="#cross-axis"><i>cross axis</i></a> of the current line of the
+  <p><a href="#flexbox-item"><i>Flexbox items</i></a> can be aligned in the
+   <a href="#cross-axis"><i>cross axis</i></a> of the current line of the
    flexbox, similar to &lsquo;<a href="#flex-pack0"><code
-   class=property>flex-pack</code></a>&rsquo; but in the perpendicular axis.
-   Note that &lsquo;<a href="#flex-align0"><code
-   class=property>flex-align</code></a>&rsquo; applies to individual <a
-   href="#flexbox-item"><i>flexbox items</i></a>, while &lsquo;<a
-   href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;
-   applies to the flexbox itself.
+   class=property>flex-pack</code></a>&rsquo; but in the perpendendicular
+   direction. &lsquo;<a href="#flex-align0"><code
+   class=property>flex-align</code></a>&rsquo; sets the default alignment for
+   all of the flexbox's <a href="#flexbox-item"><i
+   title="flexbox items">items</i></a>, including anonymous <a
+   href="#flexbox-item"><i>flexbox items</i></a>. &lsquo;<a
+   href="#flex-item-align"><code
+   class=property>flex-item-align</code></a>&rsquo; allows this default
+   alignment to be overridden for individual <a
+   href="#flexbox-item"><i>flexbox items</i></a>.
+
+  <p>A value of <dfn id=flex-item-align-auto>&lsquo;<code
+   class=css>auto</code>&rsquo;</dfn> for &lsquo;<a
+   href="#flex-item-align"><code
+   class=property>flex-item-align</code></a>&rsquo; makes the <a
+   href="#flexbox-item"><i>flexbox item</i></a> use the alignment specified
+   by &lsquo;<a href="#flex-align0"><code
+   class=property>flex-align</code></a>&rsquo; on its flexbox. The alignments
+   are defined as:
 
   <dl>
    <dt><dfn id=flex-align-start>start</dfn>
@@ -1168,12 +1223,13 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
      class=css>start</code></a>&rsquo;.</p>
 
     <p>Otherwise, all <a href="#flexbox-item"><i>flexbox items</i></a> on the
-     line with &lsquo;<code class=css>flex-align:baseline</code>&rsquo; that
-     don't run afoul of the previous paragraph are aligned such that their
-     baselines align, and the item with the largest distance between its
-     baseline and its <a href="#cross-start"><i>cross-start</i></a> margin
-     edge is placed flush against the <a
-     href="#cross-start"><i>cross-start</i></a> edge of the line.</p>
+     line with an alignment of &lsquo;<a href="#flex-align-baseline"><code
+     class=css>baseline</code></a>&rsquo; that don't run afoul of the
+     previous paragraph are aligned such that their baselines align, and the
+     item with the largest distance between its baseline and its <a
+     href="#cross-start"><i>cross-start</i></a> margin edge is placed flush
+     against the <a href="#cross-start"><i>cross-start</i></a> edge of the
+     line.</p>
 
    <dt><dfn id=flex-align-stretch>stretch</dfn>
 
@@ -1205,10 +1261,8 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
 	div {
 		display: flexbox;
 		flex-flow: column;
-		width: 200px;
-	}
-	div > div {
 		flex-align: center;
+		width: 200px;
 	}
 &lt;/style></pre>
 
@@ -1771,7 +1825,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>stretch
 
-     <td>flexbox items
+     <td>flexboxes
 
      <td>no
 
@@ -1809,6 +1863,21 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>visual
 
+    <tr>
+     <th><a class=property href="#flex-item-align">flex-item-align</a>
+
+     <td>auto | start | end | center | baseline | stretch
+
+     <td>auto
+
+     <td>flexbox items
+
+     <td>no
+
+     <td>specified value
+
+     <td>visual
+
     <tr>
      <th><a class=property href="#flex-line-pack0">flex-line-pack</a>
 
@@ -1875,6 +1944,9 @@ <h2 class=no-num id=index>Index</h2>
   <!--begin-index-->
 
   <ul class=indexlist>
+   <li>&lsquo;<code class=css>auto</code>&rsquo;, <a
+    href="#flex-item-align-auto" title="''auto''"><strong>5.2.</strong></a>
+
    <li>baseline, <a href="#flex-align-baseline"
     title=baseline><strong>5.2.</strong></a>
 
@@ -1948,6 +2020,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>flexible length's, <a href="#flexible-length0"
     title="flexible length's"><strong>4.1.</strong></a>
 
+   <li>flex-item-align, <a href="#flex-item-align"
+    title=flex-item-align><strong>5.2.</strong></a>
+
    <li>flex-line-pack, <a href="#flex-line-pack0"
     title=flex-line-pack><strong>6.1.</strong></a>
 

css3-flexbox/Overview.src.html

@@ -298,7 +298,7 @@ <h3 id='flex-flow'>
 		<dd>Same as <i>column</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.</dd>
 	</dl>
 
-	<p>The 'flex-wrap' property controls whether the flexbox is <i>single-line</i> or <i>multi-line</i>, and the direction of the <i>cross axis</i>, which affects the direction new lines are stacked in and the meaning of the 'flex-align' and 'flex-line-pack' properties.</p>
+	<p>The 'flex-wrap' property controls whether the flexbox is <i>single-line</i> or <i>multi-line</i>, and the direction of the <i>cross axis</i>, which affects the direction new lines are stacked in and the meaning of the 'flex-align', 'flex-item-align', and 'flex-line-pack' properties.</p>
 
 	<dl>
 		<dt><dfn id='flex-flow-no-wrap'>no-wrap</dfn></dt>
@@ -444,7 +444,7 @@ <h3 id='resolving-flexible-lengths'>
 <h2 id='alignment'>
 Alignment</h2>
 
-	<p>After a flexbox's contents have finished their flexing, they can be aligned in both the <i>main axis</i> with 'flex-pack' and the <i>cross axis</i> with 'flex-align'.  These properties make many common types of alignment trivial, including some things that were very difficult in CSS 2.1, like horizontal and vertical centering.</p>
+	<p>After a flexbox's contents have finished their flexing, they can be aligned in both the <i>main axis</i> with 'flex-pack' and the <i>cross axis</i> with 'flex-align' and 'flex-item-align'.  These properties make many common types of alignment trivial, including some things that were very difficult in CSS 2.1, like horizontal and vertical centering.</p>
 
 
 <h3 id='flex-pack'>
@@ -498,7 +498,7 @@ <h3 id='flex-pack'>
 
 
 <h3 id='flex-align'>
-Cross Axis Alignment: the 'flex-align' property</h3>
+Cross Axis Alignment: the 'flex-align' and 'flex-item-align' properties</h3>
 
 	<table class=propdef>
 		<tr>
@@ -510,6 +510,30 @@ <h3 id='flex-align'>
 		<tr>
 			<th>Initial:
 			<td>stretch
+		<tr>
+			<th>Applies to:
+			<td>flexboxes
+		<tr>
+			<th>Inherited:
+			<td>no
+		<tr>
+			<th>Computed Value:
+			<td>specified value
+		<tr>
+			<th>Media:
+			<td>visual
+	</table>
+
+	<table class=propdef>
+		<tr>
+			<th>Name:
+			<td><dfn>flex-item-align</dfn>
+		<tr>
+			<th>Value:
+			<td>auto | start | end | center | baseline | stretch
+		<tr>
+			<th>Initial:
+			<td>auto
 		<tr>
 			<th>Applies to:
 			<td><i>flexbox items</i>
@@ -524,7 +548,9 @@ <h3 id='flex-align'>
 			<td>visual
 	</table>
 
-	<p>The 'flex-align' property aligns <i>flexbox items</i> in the <i>cross axis</i> of the current line of the flexbox, similar to 'flex-pack' but in the perpendicular axis.  Note that 'flex-align' applies to individual <i>flexbox items</i>, while 'flex-pack' applies to the flexbox itself.</p>
+	<p><i>Flexbox items</i> can be aligned in the <i>cross axis</i> of the current line of the flexbox, similar to 'flex-pack' but in the perpendendicular direction.  'flex-align' sets the default alignment for all of the flexbox's <i title="flexbox items">items</i>, including anonymous <i>flexbox items</i>.  'flex-item-align' allows this default alignment to be overridden for individual <i>flexbox items</i>.</p>
+
+	<p>A value of <dfn id="flex-item-align-auto">''auto''</dfn> for 'flex-item-align' makes the <i>flexbox item</i> use the alignment specified by 'flex-align' on its flexbox.  The alignments are defined as:</p>
 
 	<dl>
 		<dt><dfn id="flex-align-start">start</dfn></dt>
@@ -540,7 +566,7 @@ <h3 id='flex-align'>
 		<dd>
 			<p>If the <i>flexbox item's</i> inline axis is the same as the <i>cross axis</i>, this value is identical to ''start''.</p>
 
-			<p>Otherwise, all <i>flexbox items</i> on the line with ''flex-align:baseline'' that don't run afoul of the previous paragraph are aligned such that their baselines align, and the item with the largest distance between its baseline and its <i>cross-start</i> margin edge is placed flush against the <i>cross-start</i> edge of the line.</p>
+			<p>Otherwise, all <i>flexbox items</i> on the line with an alignment of ''baseline'' that don't run afoul of the previous paragraph are aligned such that their baselines align, and the item with the largest distance between its baseline and its <i>cross-start</i> margin edge is placed flush against the <i>cross-start</i> edge of the line.</p>
 		</dd>
 
 		<dt><dfn id="flex-align-stretch">stretch</dfn></dt>
@@ -563,10 +589,8 @@ <h3 id='flex-align'>
 	div {
 		display: flexbox;
 		flex-flow: column;
-		width: 200px;
-	}
-	div > div {
 		flex-align: center;
+		width: 200px;
 	}
 &lt;/style></pre>