- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 06 Jan 2012 22:26:40 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv19858
Modified Files:
Overview.html Overview.src.html
Log Message:
Move 'flex-align' to the flexbox, add 'flex-item-align' for specific control.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.88
retrieving revision 1.89
diff -u -d -r1.88 -r1.89
--- Overview.html 6 Jan 2012 22:17:14 -0000 1.88
+++ Overview.html 6 Jan 2012 22:26:38 -0000 1.89
@@ -190,8 +190,9 @@
property</a>
<li><a href="#flex-align"><span class=secno>5.2. </span> Cross Axis
- Alignment: the ‘<code class=property>flex-align</code>’
- property</a>
+ Alignment: the ‘<code class=property>flex-align</code>’ and
+ ‘<code class=property>flex-item-align</code>’
+ properties</a>
</ul>
<li><a href="#multi-line"><span class=secno>6. </span> Multi-line
@@ -705,8 +706,10 @@
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 ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’ and
- ‘<a href="#flex-line-pack0"><code
+ href="#flex-align0"><code class=property>flex-align</code></a>’,
+ ‘<a href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’, and ‘<a
+ href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ properties.
<dl>
@@ -963,10 +966,11 @@
‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ and the <a
href="#cross-axis"><i>cross axis</i></a> with ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’.
- 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>’ and
+ ‘<a href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’. 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
‘<a href="#flex-pack0"><code
@@ -1088,7 +1092,9 @@
<h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
‘<a href="#flex-align0"><code
- class=property>flex-align</code></a>’ property</h3>
+ class=property>flex-align</code></a>’ and ‘<a
+ href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’ properties</h3>
<table class=propdef>
<tbody>
@@ -1110,6 +1116,44 @@
<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:
+
<td><a href="#flexbox-item"><i>flexbox items</i></a>
<tr>
@@ -1128,17 +1172,28 @@
<td>visual
</table>
- <p>The ‘<a href="#flex-align0"><code
- class=property>flex-align</code></a>’ 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 ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ but in the perpendicular axis.
- Note that ‘<a href="#flex-align0"><code
- class=property>flex-align</code></a>’ applies to individual <a
- href="#flexbox-item"><i>flexbox items</i></a>, while ‘<a
- href="#flex-pack0"><code class=property>flex-pack</code></a>’
- applies to the flexbox itself.
+ class=property>flex-pack</code></a>’ but in the perpendendicular
+ direction. ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’ 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>. ‘<a
+ href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’ 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>‘<code
+ class=css>auto</code>’</dfn> for ‘<a
+ href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’ makes the <a
+ href="#flexbox-item"><i>flexbox item</i></a> use the alignment specified
+ by ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’ on its flexbox. The alignments
+ are defined as:
<dl>
<dt><dfn id=flex-align-start>start</dfn>
@@ -1168,12 +1223,13 @@
class=css>start</code></a>’.</p>
<p>Otherwise, all <a href="#flexbox-item"><i>flexbox items</i></a> on the
- line with ‘<code class=css>flex-align:baseline</code>’ 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 ‘<a href="#flex-align-baseline"><code
+ class=css>baseline</code></a>’ 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 @@
div {
display: flexbox;
flex-flow: column;
- width: 200px;
- }
- div > div {
flex-align: center;
+ width: 200px;
}
</style></pre>
@@ -1771,7 +1825,7 @@
<td>stretch
- <td>flexbox items
+ <td>flexboxes
<td>no
@@ -1810,6 +1864,21 @@
<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>
<td>start | end | center | justify
@@ -1875,6 +1944,9 @@
<!--begin-index-->
<ul class=indexlist>
+ <li>‘<code class=css>auto</code>’, <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 @@
<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>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.88
retrieving revision 1.89
diff -u -d -r1.88 -r1.89
--- Overview.src.html 6 Jan 2012 22:17:14 -0000 1.88
+++ Overview.src.html 6 Jan 2012 22:26:38 -0000 1.89
@@ -298,7 +298,7 @@
<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 @@
<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-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>
@@ -512,6 +512,30 @@
<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>
<tr>
<th>Inherited:
@@ -524,7 +548,9 @@
<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 @@
<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 @@
div {
display: flexbox;
flex-flow: column;
- width: 200px;
- }
- div > div {
flex-align: center;
+ width: 200px;
}
</style></pre>
Received on Friday, 6 January 2012 22:28:45 UTC