- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 27 Aug 2011 00:42:31 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv28793
Modified Files:
Overview.html Overview.src.html
Log Message:
Change flex-pack:justify to distribute, to match Grid. Minor editorial rewrite to match sentence structure of flex-align.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.50
retrieving revision 1.51
diff -u -d -r1.50 -r1.51
--- Overview.html 27 Aug 2011 00:18:09 -0000 1.50
+++ Overview.html 27 Aug 2011 00:42:29 -0000 1.51
@@ -1096,7 +1096,7 @@
<tr>
<th>Value:
- <td>start | end | center | justify
+ <td>start | end | center | distribute
<tr>
<th>Initial:
@@ -1124,59 +1124,65 @@
<td>visual
</table>
- <p>Between and around <a href="#flexbox-item"><i>flexbox items</i></a>
- there are additional flexible lengths called <dfn id=packing-space
- title="packing space|packing spaces">packing spaces</dfn>. After the
- flexbox items have a chance <a href="#packing-space"><i>Packing
- spaces</i></a> can absorb leftover free space in a flexbox line if there
- aren't any other <a href="#flexible-length0"><i>flexible lengths</i></a>,
- or if all the <a href="#flexible-length0"><i>flexible lengths</i></a> have
- reached their maximum size. The ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ property defines the
- flexibility of <a href="#packing-space"><i>packing spaces</i></a>:
+ <p>The ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’ property aligns <a
+ href="#flexbox-item"><i>flexbox items</i></a> in the <a
+ href="#main-axis"><i>main axis</i></a> of the current line of the flexbox.
+ This is done <a href="#flex-line-pack-after"><em>after</em></a> any
+ flexible lengths have been resolved. Typically it helps distribute extra
+ free space leftover when either all the <a href="#flexbox-item"><i>flexbox
+ items</i></a> on a line are inflexible, or are flexible but have reach
+ their maximum size, but it also exerts some control over the alignment of
+ items when they overflow the line.
<dl>
<dt><dfn id=flex-pack-start>start</dfn>
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
- start of the flexbox line. The last <a href="#packing-space"><i>packing
- space</i></a> on the line (between the margin of the last <a
- href="#flexbox-item"><i>flexbox item</i></a> on the line and the edge of
- the flexbox) must absorb all leftover free space; all other packing
- spaces on the line must have a length of ‘<code
- class=css>0</code>’.
+ start of the line. The <a href="#main-start"><i>main-start</i></a> margin
+ edge of the first <a href="#flexbox-item"><i>flexbox item</i></a> on the
+ line is placed flush with the <a href="#main-start"><i>main-start</i></a>
+ edge of the line, and each subsequent <a href="#flexbox-item"><i>flexbox
+ item</i></a> is placed flush with the preceding item.
<dt><dfn id=flex-pack-end>end</dfn>
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
- end of the flexbox line. The first <a href="#packing-space"><i>packing
- space</i></a> on the line (between the edge of the flexbox and the margin
- of the first <a href="#flexbox-item"><i>flexbox item</i></a> on the line)
- must absorb all leftover free space; all other <a
- href="#packing-space"><i>packing spaces</i></a> on the line must have a
- length of ‘<code class=css>0</code>’.
+ end of the line. The <a href="#main-end"><i>main-end</i></a> margin edge
+ of the last <a href="#flexbox-item"><i>flexbox item</i></a> is placed
+ flush with the <a href="#main-end"><i>main-end</i></a> edge of the line,
+ and each preceding <a href="#flexbox-item"><i>flexbox item</i></a> is
+ placed flush with the subsequent item.
<dt><dfn id=flex-pack-center>center</dfn>
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
- center of the flexbox line. The first and last <a
- href="#packing-space"><i>packing spaces</i></a> on the line must equally
- split all leftover free space; all other <a
- href="#packing-space"><i>packing spaces</i></a> on the line must have a
- length of ‘<code class=css>0</code>’.
+ center of the line. If the leftover free-space is negative, this value is
+ identical to ‘<a href="#flex-pack-start"><code
+ class=css>start</code></a>’. Otherwise, the <a
+ href="#flexbox-item"><i>flexbox items</i></a> on the line are placed
+ flush with each other and aligned in the center of the line, with equal
+ amounts of empty space between the <a
+ href="#main-start"><i>main-start</i></a> edge of the line and the first
+ item on the line and between the <a href="#main-end"><i>main-end</i></a>
+ edge of the line and the last item on the line.
- <dt><dfn id=flex-pack-justify>justify</dfn>
+ <dt><dfn id=flex-pack-distribute>distribute</dfn>
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are evenly
- distributed in the flexbox line. If there is more than one <a
- href="#flexbox-item"><i>flexbox item</i></a> on the line, the first and
- last <a href="#packing-space"><i>packing spaces</i></a> on the line must
- have a length of ‘<code class=css>0</code>’ and all other <a
- href="#packing-space"><i>packing spaces</i></a> on the line must equally
- split all leftover free space. Otherwise, ‘<a
- href="#flex-pack-justify"><code class=css>justify</code></a>’ must
- act identically to ‘<a href="#flex-pack-start"><code
- class=css>start</code></a>’.
+ distributed in the line. If the leftover free-space is negative or there
+ is only a single <a href="#flexbox-item"><i>flexbox item</i></a> on the
+ line, this value is identical to ‘<a href="#flex-pack-start"><code
+ class=css>start</code></a>’. Otherwise, the <a
+ href="#main-start"><i>main-start</i></a> margin edge of the first <a
+ href="#flexbox-item"><i>flexbox 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 href="#main-end"><i>main-end</i></a> margin edge of the last <a
+ href="#flexbox-item"><i>flexbox item</i></a> on the line is placed flush
+ with the <a href="#main-end"><i>main-end</i></a> edge of the line, and
+ the remaining <a href="#flexbox-item"><i>flexbox items</i></a> on the
+ line are distributed so that the empty space between any two adjacent
+ items is the same.
</dl>
<div class=example>
@@ -1187,11 +1193,6 @@
‘<a href="#flex-align0"><code
class=property>flex-align</code></a>’ property</h3>
- <p>Sizing and positioning of <a href="#flexbox-item"><i>flexbox
- items</i></a> along the <a href="#cross-axis"><i>cross axis</i></a> of
- flexbox is controlled by the ‘<a href="#flex-align0"><code
- class=property>flex-align</code></a>’ property.
-
<table class=propdef>
<tbody>
<tr>
@@ -1232,10 +1233,15 @@
<p>The ‘<a href="#flex-align0"><code
class=property>flex-align</code></a>’ property aligns <a
- href="#flexbox-item"><i>flexbox items</i></a> within the current line of
- the flexbox — essentially the same thing as ‘<a
- href="#flex-pack0"><code class=property>flex-pack</code></a>’, only
- in the <a href="#cross-axis"><i>cross axis</i></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
+ 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.
<dl>
<dt><dfn id=flex-align-before>before</dfn>
@@ -1539,7 +1545,7 @@
<dt><dfn id=relevant-length>relevant length</dfn>
<dd>The width, height, margin, border, or padding of a flexbox item. Also,
- the <a href="#packing-space"><i>packing space</i></a>s of a flexbox.
+ the <i>packing space</i>s of a flexbox.
<dt><dfn id=flex-tuple>flex tuple</dfn>
@@ -1652,54 +1658,50 @@
equal to the minimum size. If the preferred size is now greater than
the maximum size, set it equal to the maximum size.</p>
- <dt>For <a href="#packing-space"><i>packing space</i></a>s:
+ <dt>For <i>packing space</i>s:
<dd>
<p>If the flexbox's ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ is <i
- title=flex-pack-start>start</i>,the last <a
- href="#packing-space"><i>packing space</i></a> (between the final <a
- href="#flexbox-item"><i>flexbox item</i></a>, after reordering by
- ‘<a href="#flex-order0"><code
+ title=flex-pack-start>start</i>,the last <i>packing space</i> (between
+ the final <a href="#flexbox-item"><i>flexbox item</i></a>, after
+ reordering by ‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’, and the end of the
flexbox) has a minimum size of 0, a maximum size of infinity, a
preferred size of 0, a positive flexibility of 1, and a negative
- flexibility of 0. All other <a href="#packing-space"><i>packing
- space</i></a>s have minimum size, maximum size, preferred size,
- positive flexibility, and negative flexibility of 0.</p>
+ flexibility of 0. All other <i>packing space</i>s have minimum size,
+ maximum size, preferred size, positive flexibility, and negative
+ flexibility of 0.</p>
<p>If the flexbox's ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ is <i
- title=flex-pack-end>end</i>, the first <a
- href="#packing-space"><i>packing space</i></a> (between the first <a
- href="#flexbox-item"><i>flexbox item</i></a>, after reordering by
- ‘<a href="#flex-order0"><code
+ title=flex-pack-end>end</i>, the first <i>packing space</i> (between
+ the first <a href="#flexbox-item"><i>flexbox item</i></a>, after
+ reordering by ‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’, and the start of the
flexbox) has a minimum size of 0, a maximum size of infinity, a
preferred size of 0, a positive flexibility of 1, and a negative
- flexibility of 0. All other <a href="#packing-space"><i>packing
- space</i></a>s have minimum size, maximum size, preferred size,
- positive flexibility, and negative flexibility of 0.</p>
+ flexibility of 0. All other <i>packing space</i>s have minimum size,
+ maximum size, preferred size, positive flexibility, and negative
+ flexibility of 0.</p>
<p>If the flexbox's ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ is <i
- title=flex-pack-center>center</i>, the first and last <a
- href="#packing-space"><i>packing space</i></a>s (as defined above)
- have a minimum size of 0, a maximum size of infinity, a preferred size
- of 0, a positive flexibility of 1, and a negative flexibility of 0.
- All other <a href="#packing-space"><i>packing space</i></a>s have
+ title=flex-pack-center>center</i>, the first and last <i>packing
+ space</i>s (as defined above) have a minimum size of 0, a maximum size
+ of infinity, a preferred size of 0, a positive flexibility of 1, and a
+ negative flexibility of 0. All other <i>packing space</i>s have
minimum size, maximum size, preferred size, positive flexibility, and
negative flexibility of 0.</p>
<p>If the flexbox's ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ is <i
- title=flex-pack-justify>justify</i>, the first and last <a
- href="#packing-space"><i>packing space</i></a>s (as defined above)
- have a minimum size, maximum size, preferred size, positive
- flexibility, and negative flexibility of 0. All other <a
- href="#packing-space"><i>packing space</i></a>s have a minimum size of
- 0, a maximum size of infinity, a preferred size of 0, a positive
- flexibility of 1, and a negative flexibility of 0.</p>
+ title=flex-pack-justify>justify</i>, the first and last <i>packing
+ space</i>s (as defined above) have a minimum size, maximum size,
+ preferred size, positive flexibility, and negative flexibility of 0.
+ All other <i>packing space</i>s have a minimum size of 0, a maximum
+ size of infinity, a preferred size of 0, a positive flexibility of 1,
+ and a negative flexibility of 0.</p>
</dl>
</ol>
@@ -1743,13 +1745,13 @@
<h3 id=second-distribution-round><span class=secno>7.3. </span> Second
Distribution Round</h3>
- <p>This step distributes any leftover available space to the <a
- href="#packing-space"><i>packing space</i></a>, so that the flexbox items
- are arranged within the flexbox as desired.
+ <p>This step distributes any leftover available space to the <i>packing
+ space</i>, so that the flexbox items are arranged within the flexbox as
+ desired.
<p>Collect the same set of <a href="#flex-tuple"><i>flex tuple</i></a>s as
in the first distribution round (now inflexible lengths), and additionally
- collect the flexbox's <a href="#packing-space"><i>packing space</i></a>s.
+ collect the flexbox's <i>packing space</i>s.
<p>Invoke the <i>free space allocation algorithm</i> with the set of <a
href="#flex-tuple"><i>flex tuple</i></a>s collected above, and an <a
@@ -2186,7 +2188,7 @@
<tr>
<th><a class=property href="#flex-pack0">flex-pack</a>
- <td>start | end | center | justify
+ <td>start | end | center | distribute
<td>start
@@ -2243,7 +2245,8 @@
title=cross-start><strong>2.</strong></a>
<li>distribute, <a href="#flex-line-pack-distribute"
- title=distribute><strong>6.1.</strong></a>
+ title=distribute><strong>6.1.</strong></a>, <a
+ href="#flex-pack-distribute" title=distribute><strong>5.1.</strong></a>
<li>end, <a href="#flex-pack-end" title=end><strong>5.1.</strong></a>
@@ -2313,9 +2316,6 @@
<li>inner measure, <a href="#inner-measure" title="inner
measure"><strong>7.</strong></a>
- <li>justify, <a href="#flex-pack-justify"
- title=justify><strong>5.1.</strong></a>
-
<li>main axis, <a href="#main-axis" title="main
axis"><strong>2.</strong></a>
@@ -2337,12 +2337,6 @@
<li>negative flexibility, <a href="#negative-flexibility" title="negative
flexibility"><strong>4.1.</strong></a>
- <li>packing space, <a href="#packing-space" title="packing
- space"><strong>5.1.</strong></a>
-
- <li>packing spaces, <a href="#packing-space" title="packing
- spaces"><strong>5.1.</strong></a>
-
<li>positive flexibility, <a href="#positive-flexibility" title="positive
flexibility"><strong>4.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.49
retrieving revision 1.50
diff -u -d -r1.49 -r1.50
--- Overview.src.html 27 Aug 2011 00:18:09 -0000 1.49
+++ Overview.src.html 27 Aug 2011 00:42:29 -0000 1.50
@@ -481,7 +481,7 @@
<td><dfn>flex-pack</dfn>
<tr>
<th>Value:
- <td>start | end | center | justify
+ <td>start | end | center | distribute
<tr>
<th>Initial:
<td>start
@@ -499,20 +499,20 @@
<td>visual
</table>
- <p>Between and around <i>flexbox items</i> there are additional flexible lengths called <dfn id="packing-space" title="packing space|packing spaces">packing spaces</dfn>. After the flexbox items have a chance <i>Packing spaces</i> can absorb leftover free space in a flexbox line if there aren't any other <i>flexible lengths</i>, or if all the <i>flexible lengths</i> have reached their maximum size. The 'flex-pack' property defines the flexibility of <i>packing spaces</i>:</p>
+ <p>The 'flex-pack' property aligns <i>flexbox items</i> in the <i>main axis</i> of the current line of the flexbox. This is done <em>after</em> any flexible lengths have been resolved. Typically it helps distribute extra free space leftover when either all the <i>flexbox items</i> on a line are inflexible, or are flexible but have reach their maximum size, but it also exerts some control over the alignment of items when they overflow the line.</p>
<dl>
<dt><dfn id='flex-pack-start'>start</dfn></dt>
- <dd><i>Flexbox items</i> are packed toward the start of the flexbox line. The last <i>packing space</i> on the line (between the margin of the last <i>flexbox item</i> on the line and the edge of the flexbox) must absorb all leftover free space; all other packing spaces on the line must have a length of ''0''.</dd>
+ <dd><i>Flexbox items</i> are packed toward the start of the line. The <i>main-start</i> margin edge of the first <i>flexbox item</i> on the line is placed flush with the <i>main-start</i> edge of the line, and each subsequent <i>flexbox item</i> is placed flush with the preceding item.</dd>
<dt><dfn id='flex-pack-end'>end</dfn></dt>
- <dd><i>Flexbox items</i> are packed toward the end of the flexbox line. The first <i>packing space</i> on the line (between the edge of the flexbox and the margin of the first <i>flexbox item</i> on the line) must absorb all leftover free space; all other <i>packing spaces</i> on the line must have a length of ''0''.</dd>
+ <dd><i>Flexbox items</i> are packed toward the end of the line. The <i>main-end</i> margin edge of the last <i>flexbox item</i> is placed flush with the <i>main-end</i> edge of the line, and each preceding <i>flexbox item</i> is placed flush with the subsequent item.</dd>
<dt><dfn id='flex-pack-center'>center</dfn></dt>
- <dd><i>Flexbox items</i> are packed toward the center of the flexbox line. The first and last <i>packing spaces</i> on the line must equally split all leftover free space; all other <i>packing spaces</i> on the line must have a length of ''0''.</dd>
+ <dd><i>Flexbox items</i> are packed toward the center of the line. If the leftover free-space is negative, this value is identical to ''start''. Otherwise, the <i>flexbox items</i> on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the <i>main-start</i> edge of the line and the first item on the line and between the <i>main-end</i> edge of the line and the last item on the line.</dd>
- <dt><dfn id='flex-pack-justify'>justify</dfn></dt>
- <dd><i>Flexbox items</i> are evenly distributed in the flexbox line. If there is more than one <i>flexbox item</i> on the line, the first and last <i>packing spaces</i> on the line must have a length of ''0'' and all other <i>packing spaces</i> on the line must equally split all leftover free space. Otherwise, ''justify'' must act identically to ''start''.</dd>
+ <dt><dfn id='flex-pack-distribute'>distribute</dfn></dt>
+ <dd><i>Flexbox items</i> are evenly distributed in the line. If the leftover free-space is negative or there is only a single <i>flexbox item</i> on the line, this value is identical to ''start''. Otherwise, the <i>main-start</i> margin edge of the first <i>flexbox item</i> on the line is placed flush with the <i>main-start</i> edge of the line, the <i>main-end</i> margin edge of the last <i>flexbox item</i> on the line is placed flush with the <i>main-end</i> edge of the line, and the remaining <i>flexbox items</i> on the line are distributed so that the empty space between any two adjacent items is the same.</dd>
</dl>
<div class=example>
@@ -523,8 +523,6 @@
<h3 id='flex-align'>
Cross Axis Alignment: the 'flex-align' property</h3>
- <p>Sizing and positioning of <i>flexbox items</i> along the <i>cross axis</i> of flexbox is controlled by the 'flex-align' property.</p>
-
<table class=propdef>
<tr>
<th>Name:
@@ -549,7 +547,7 @@
<td>visual
</table>
- <p>The 'flex-align' property aligns <i>flexbox items</i> within the current line of the flexbox — essentially the same thing as 'flex-pack', only in the <i>cross axis</i>.</p>
+ <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>
<dl>
<dt><dfn id="flex-align-before">before</dfn></dt>
Received on Saturday, 27 August 2011 00:43:09 UTC