- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 31 Aug 2011 23:57:54 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv28457
Modified Files:
Overview.html Overview.src.html
Log Message:
Editorial rewrite of flex-line-pack to match flex-pack's wording.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.53
retrieving revision 1.54
diff -u -d -r1.53 -r1.54
--- Overview.html 27 Aug 2011 01:44:37 -0000 1.53
+++ Overview.html 31 Aug 2011 23:57:51 -0000 1.54
@@ -16,12 +16,12 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 27 August 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 31 August 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110827/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110827/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110831/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110831/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -1324,9 +1324,19 @@
class=property>flex-pack</code></a>’ and ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’
properties only pay attention to the items on a single line at a time. The
- size of a line depends on the contents of the lines and the value of the
- ‘<a href="#flex-align0"><code
- class=property>flex-align</code></a>’ property. The lines are
+ <a href="#main-size"><i>main size</i></a> of a line is the same as the <a
+ href="#main-size"><i>main size</i></a> of the flexbox's content box. The
+ <a href="#cross-size"><i>cross size</i></a> of a line depends on whether
+ the flexbox is <a href="#single-line"><i>single-line</i></a> or <a
+ href="#multi-line"><i>multi-line</i></a>: the <a
+ href="#cross-size"><i>cross size</i></a> of the sole line in a <a
+ href="#single-line"><i>single-line</i></a> flexbox is the same as the <a
+ href="#cross-size"><i>cross size</i></a> of the flexbox's content box,
+ while the <a href="#cross-size"><i>cross size</i></a> of a line in a <a
+ href="#multi-line"><i>multi-line</i></a> flexbox is the minimum size
+ necessary to contain the <a href="#flexbox-item"><i>flexbox items</i></a>
+ on the line, after aligning them with ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’. The lines themselves are then
aligned within a flexbox with the ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ property.
@@ -1440,7 +1450,7 @@
<tr>
<th>Applies to:
- <td>flexboxes
+ <td><a href="#multi-line"><i>multi-line</i></a> flexboxes
<tr>
<th>Inherited:
@@ -1458,44 +1468,64 @@
<td>visual
</table>
- <p>The flex-line-pack property may be used to control the alignment of
- lines in multi-line flexboxes. The values of this property have the
- following meanings:
+ <p>The ‘<a href="#flex-line-pack0"><code
+ class=property>flex-line-pack</code></a>’ property aligns a
+ flexbox's lines within the flexbox when there is extra space in the <a
+ href="#cross-axis"><i>cross axis</i></a>, similar to how ‘<a
+ href="#flex-pack0"><code class=property>flex-pack</code></a>’ aligns
+ individual items within the <a href="#main-axis"><i>main axis</i></a>:
<dl>
<dt><dfn id=flex-line-pack-start>start</dfn>
- <dd>The first line of child boxes is placed along the ‘<a
- href="#flex-align-before"><code class=property>before</code></a>’
- edge of the content box (as determined by direction of <a
- href="#cross-axis"><i>cross axis</i></a>), and additional lines are
- placed afterward with no extra spacing between them.
+ <dd>Lines are packed toward the start of the flexbox. The <a
+ href="#cross-start"><i>cross-start</i></a> edge of the first line in the
+ flexbox is placed flush with the <a
+ href="#cross-start"><i>cross-start</i></a> edge of the flexbox, and each
+ subsequent line is placed flush with the preceding line.
<dt><dfn id=flex-line-pack-end>end</dfn>
- <dd>Lines of child boxes are placed with no extra spacing between and
- ‘<a href="#flex-align-after"><code
- class=property>after</code></a>’ edge of the last line is aligned
- with ‘<a href="#flex-align-after"><code
- class=property>after</code></a>’ edge of the content box.
+ <dd>Lines are packed toward the end of the flexbox. The <a
+ href="#cross-end"><i>cross-end</i></a> edge of the last line is placed
+ flush with the <a href="#cross-end"><i>cross-end</i></a> edge of the
+ flexbox, and each preceding line is placed flush with the subsequent
+ line.
<dt><dfn id=flex-line-pack-center>center</dfn>
- <dd>Lines of child boxes are placed with no space between them and equal
- amount of extra space left before first line and after last line.
+ <dd>Lines are packed toward the center of the flexbox. If the leftover
+ free-space is negative, this value is identical to ‘<a
+ href="#flex-line-pack-start"><code class=css>start</code></a>’.
+ Otherwise, the lines in the flexbox are placed flush with each other and
+ aligned in the center of the flexbox, with equal amounts of empty space
+ between the <a href="#cross-start"><i>cross-start</i></a> content edge of
+ the flexbox and the first line in the flexbox and between the <a
+ href="#cross-end"><i>cross-end</i></a> content edge of the flexbox and
+ the last line in the flexbox.
<dt><dfn id=flex-line-pack-distribute>distribute</dfn>
- <dd>The first line of child boxes is aligned with ‘<a
- href="#flex-align-before"><code class=property>before</code></a>’
- edge of containing box. Lines of child boxes are spread with equal amout
- of empty spaces between each two lines, and so that ‘<a
- href="#flex-align-after"><code class=property>after</code></a>’
- edge of last line of child boxes is aligned with ‘<a
- href="#flex-align-after"><code class=property>after</code></a>’
- edge of conaining box.
+ <dd>Lines are evenly distributed in the flexbox. If the leftover
+ free-space is negative or there is only a single line in the flexbox,
+ this value is identical to ‘<a href="#flex-line-pack-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
+ flexbox is placed flush with the <a
+ href="#cross-start"><i>cross-start</i></a> content edge of the flexbox,
+ the <a href="#cross-end"><i>cross-end</i></a> edge of the last line in
+ the flexbox is placed flush with the <a
+ href="#cross-end"><i>cross-end</i></a> content edge of the flexbox, and
+ the remaining lines in the flexbox are distributed so that the empty
+ space between any two adjacent lines is the same.
</dl>
+ <p class=note>Note: Only <a href="#multi-line"><i>multi-line</i></a>
+ flexboxes ever have free space in the <a href="#cross-axis"><i>cross
+ axis</i></a> for lines to be aligned in, because in a <a
+ href="#single-line"><i>single-line</i></a> flexbox the sole line
+ automatically stretches to fill the space.
+
<p class=issue>TODO: examples
<h2 id=layout-algorithm><span class=secno>7. </span> Flexbox Layout
@@ -1822,7 +1852,7 @@
<td>before
- <td>flexboxes
+ <td>multi-line flexboxes
<td>no
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.52
retrieving revision 1.53
diff -u -d -r1.52 -r1.53
--- Overview.src.html 27 Aug 2011 01:44:37 -0000 1.52
+++ Overview.src.html 31 Aug 2011 23:57:51 -0000 1.53
@@ -606,7 +606,7 @@
<p>A flexbox can be either single-line or multi-line, depending on the 'flex-flow' property. A <dfn>single-line</dfn> flexbox lays out all of its children in a single line, even if that would cause the flexbox to overflow its bounds. A <dfn>multi-line</dfn> flexbox breaks its <i>flexbox items</i> across multiple lines to avoid overflowing, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. Every line contains at least one <i>flexbox item</i>, unless the flexbox itself is completely empty.</p>
- <p>When additional lines are created, they are stacked in the flexbox in the <i>cross axis</i>. Each line is completely independent; flexible lengths and the 'flex-pack' and 'flex-align' properties only pay attention to the items on a single line at a time. The size of a line depends on the contents of the lines and the value of the 'flex-align' property. The lines are aligned within a flexbox with the 'flex-line-pack' property.</p>
+ <p>When additional lines are created, they are stacked in the flexbox in the <i>cross axis</i>. Each line is completely independent; flexible lengths and the 'flex-pack' and 'flex-align' properties only pay attention to the items on a single line at a time. The <i>main size</i> of a line is the same as the <i>main size</i> of the flexbox's content box. The <i>cross size</i> of a line depends on whether the flexbox is <i>single-line</i> or <i>multi-line</i>: the <i>cross size</i> of the sole line in a <i>single-line</i> flexbox is the same as the <i>cross size</i> of the flexbox's content box, while the <i>cross size</i> of a line in a <i>multi-line</i> flexbox is the minimum size necessary to contain the <i>flexbox items</i> on the line, after aligning them with 'flex-align'. The lines themselves are then aligned within a flexbox with the 'flex-line-pack' property.</p>
<div class=example>
<p>This example shows four buttons that do not fit horizontally.</p>
@@ -682,7 +682,7 @@
<td>before
<tr>
<th>Applies to:
- <td>flexboxes
+ <td><i>multi-line</i> flexboxes
<tr>
<th>Inherited:
<td>no
@@ -694,22 +694,24 @@
<td>visual
</table>
- <p>The flex-line-pack property may be used to control the alignment of lines in multi-line flexboxes. The values of this property have the following meanings:</p>
+ <p>The 'flex-line-pack' property aligns a flexbox's lines within the flexbox when there is extra space in the <i>cross axis</i>, similar to how 'flex-pack' aligns individual items within the <i>main axis</i>:</p>
<dl>
<dt><dfn id='flex-line-pack-start'>start</dfn></dt>
- <dd>The first line of child boxes is placed along the 'before' edge of the content box (as determined by direction of <i>cross axis</i>), and additional lines are placed afterward with no extra spacing between them.</dd>
+ <dd>Lines are packed toward the start of the flexbox. The <i>cross-start</i> edge of the first line in the flexbox is placed flush with the <i>cross-start</i> edge of the flexbox, and each subsequent line is placed flush with the preceding line.</dd>
<dt><dfn id='flex-line-pack-end'>end</dfn></dt>
- <dd>Lines of child boxes are placed with no extra spacing between and 'after' edge of the last line is aligned with 'after' edge of the content box.</dd>
+ <dd>Lines are packed toward the end of the flexbox. The <i>cross-end</i> edge of the last line is placed flush with the <i>cross-end</i> edge of the flexbox, and each preceding line is placed flush with the subsequent line.</dd>
<dt><dfn id='flex-line-pack-center'>center</dfn></dt>
- <dd>Lines of child boxes are placed with no space between them and equal amount of extra space left before first line and after last line.</dd>
-
+ <dd>Lines are packed toward the center of the flexbox. If the leftover free-space is negative, this value is identical to ''start''. Otherwise, the lines in the flexbox are placed flush with each other and aligned in the center of the flexbox, with equal amounts of empty space between the <i>cross-start</i> content edge of the flexbox and the first line in the flexbox and between the <i>cross-end</i> content edge of the flexbox and the last line in the flexbox.</dd>
+
<dt><dfn id='flex-line-pack-distribute'>distribute</dfn></dt>
- <dd>The first line of child boxes is aligned with 'before' edge of containing box. Lines of child boxes are spread with equal amout of empty spaces between each two lines, and so that 'after' edge of last line of child boxes is aligned with 'after' edge of conaining box.</dd>
+ <dd>Lines are evenly distributed in the flexbox. If the leftover free-space is negative or there is only a single line in the flexbox, this value is identical to ''start''. Otherwise, the <i>cross-start</i> edge of the first line in the flexbox is placed flush with the <i>cross-start</i> content edge of the flexbox, the <i>cross-end</i> edge of the last line in the flexbox is placed flush with the <i>cross-end</i> content edge of the flexbox, and the remaining lines in the flexbox are distributed so that the empty space between any two adjacent lines is the same.</dd>
</dl>
-
+
+ <p class='note'>Note: Only <i>multi-line</i> flexboxes ever have free space in the <i>cross axis</i> for lines to be aligned in, because in a <i>single-line</i> flexbox the sole line automatically stretches to fill the space.</p>
+
<p class="issue">TODO: examples</p>
Received on Wednesday, 31 August 2011 23:57:56 UTC