- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 08 Dec 2011 00:43:41 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv9220
Modified Files:
Overview.html Overview.src.html
Log Message:
Changed several instances of 'multiline' to 'multi-line' for consistency, and wrapped them in <i>.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.75
retrieving revision 1.76
diff -u -d -r1.75 -r1.76
--- Overview.html 7 Dec 2011 19:49:43 -0000 1.75
+++ Overview.html 8 Dec 2011 00:43:39 -0000 1.76
@@ -20,11 +20,11 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 7 December 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 8 December 2011</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-flexbox-20111207/">http://www.w3.org/TR/2011/ED-css3-flexbox-20111207/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-flexbox-20111208/">http://www.w3.org/TR/2011/ED-css3-flexbox-20111208/</a>-->
<dd><a
@@ -186,7 +186,7 @@
property</a>
</ul>
- <li><a href="#multiline"><span class=secno>6. </span> Multi-line
+ <li><a href="#multi-line"><span class=secno>6. </span> Multi-line
Flexbox</a>
<ul class=toc>
<li><a href="#flex-line-pack"><span class=secno>6.1. </span>
@@ -240,7 +240,7 @@
<p>The contents of a flexbox can be laid out in any direction, can have
their order swapped around dynamically, and can "flex" their sizes and
positions to respond to the available space. If a flexbox is <a
- href="#multi-line"><i>multi-line</i></a>, the flexbox items flow in two
+ href="#multi-line0"><i>multi-line</i></a>, the flexbox items flow in two
dimensions, wrapping into separate lines in a fashion similar to how text
is wrapped into multiple lines. The direction that these lines are stacked
in can also be controlled explicitly, relative either to the current
@@ -316,8 +316,8 @@
href="#flexbox-item"><i>flexbox items</i></a> can either "flex" to fill
the available space or be aligned within the space with the ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’
- property. If a flexbox is <a href="#multi-line"><i>multi-line</i></a>, new
- lines are added in the <a href="#cross-end"><i>cross-end</i></a>
+ property. If a flexbox is <a href="#multi-line0"><i>multi-line</i></a>,
+ new lines are added in the <a href="#cross-end"><i>cross-end</i></a>
direction, and can similarly be aligned, centered, or distributed within
the flexbox with the ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ property.
@@ -688,9 +688,10 @@
axis</i></a>, which affects the direction that flexbox items are laid out
in, and the meaning of the ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ properties; the second, if
- specified, marks the flexbox as being multiline and sets 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
+ specified, marks the flexbox as being <a
+ href="#multi-line0"><i>multi-line</i></a> and sets 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
class=property>flex-line-pack</code></a>’ properties.
@@ -731,7 +732,7 @@
<p>The ‘<a href="#flex-wrap"><code
class=property>flex-wrap</code></a>’ property controls whether the
flexbox is <a href="#single-line"><i>single-line</i></a> or <a
- href="#multi-line"><i>multi-line</i></a>, and the direction of the <a
+ 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
@@ -750,7 +751,7 @@
<dt><dfn id=flex-flow-wrap>wrap</dfn>
- <dd>The flexbox is <a href="#multi-line"><i>multi-line</i></a>. The <a
+ <dd>The flexbox is <a href="#multi-line0"><i>multi-line</i></a>. The <a
href="#cross-start"><i>cross-start</i></a> direction is equivalent to
either the "start" or "before" direction of the current writing mode,
whichever is in the <i>cross-axis</i>, and the <a
@@ -1250,17 +1251,17 @@
<p>The precise effects of this property are articulated in the <a
href="#layout-algorithm">Layout Algorithm</a> section.
- <h2 id=multiline><span class=secno>6. </span> Multi-line Flexbox</h2>
+ <h2 id=multi-line><span class=secno>6. </span> Multi-line Flexbox</h2>
- <p>A flexbox can be either single-line or multi-line, depending on the
- ‘<a href="#flex-flow0"><code
- class=property>flex-flow</code></a>’ property. A <dfn
- id=single-line>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 id=multi-line>multi-line</dfn> flexbox breaks its <a
- href="#flexbox-item"><i>flexbox items</i></a> 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
+ <p>A flexbox can be either <a href="#single-line"><i>single-line</i></a> or
+ <a href="#multi-line0"><i>multi-line</i></a>, depending on the ‘<a
+ href="#flex-flow0"><code class=property>flex-flow</code></a>’
+ property. A <dfn id=single-line>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 id=multi-line0>multi-line</dfn> flexbox breaks
+ its <a href="#flexbox-item"><i>flexbox items</i></a> 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 <a href="#flexbox-item"><i>flexbox item</i></a>, unless the flexbox
itself is completely empty.
@@ -1274,12 +1275,12 @@
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="#multi-line0"><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
+ href="#multi-line0"><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
@@ -1311,7 +1312,7 @@
pixels. This will allow the first three buttons to fit in 240 pixels with
60 pixels left over of remaining space. Because the ‘<a
href="#flex-flow0"><code class=property>flex-flow</code></a>’
- property specifies a multiline flexbox (due to the ‘<a
+ property specifies a multi-line flexbox (due to the ‘<a
href="#flex-flow-wrap"><code class=css>wrap</code></a>’ keyword
appearing in its value), the flexbox will create an additional line to
contain the last button.</p>
@@ -1389,7 +1390,7 @@
<tr>
<th>Applies to:
- <td><a href="#multi-line"><i>multi-line</i></a> flexboxes
+ <td><a href="#multi-line0"><i>multi-line</i></a> flexboxes
<tr>
<th>Inherited:
@@ -1458,7 +1459,7 @@
space between any two adjacent lines is the same.
</dl>
- <p class=note>Note: Only <a href="#multi-line"><i>multi-line</i></a>
+ <p class=note>Note: Only <a href="#multi-line0"><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
@@ -1497,7 +1498,7 @@
<li>Based on the hypothetical sizes of the items, find the real main size
of the flexbox and the hypothetical cross size.
- <li>Based on both of these, linebreak the flexbox if it's multiline. (Or
+ <li>Based on both of these, linebreak the flexbox if it's multi-line. (Or
does the possibility of linebreaking affect the main size of the
flexbox, in a shrinkwrapping way?)
@@ -1604,7 +1605,7 @@
by talking with Ojan, etc.</span>
<li>
- <p>If the flexbox is multiline, group the flexbox items into multiple
+ <p>If the flexbox is multi-line, group the flexbox items into multiple
lines:</p>
<ol>
@@ -1992,7 +1993,7 @@
<li>main-start, <a href="#main-start"
title=main-start><strong>2.</strong></a>
- <li>multi-line, <a href="#multi-line"
+ <li>multi-line, <a href="#multi-line0"
title=multi-line><strong>6.</strong></a>
<li>negative flexibility, <a href="#negative-flexibility"
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.75
retrieving revision 1.76
diff -u -d -r1.75 -r1.76
--- Overview.src.html 7 Dec 2011 19:49:43 -0000 1.75
+++ Overview.src.html 8 Dec 2011 00:43:39 -0000 1.76
@@ -284,7 +284,7 @@
<p>The 'flex-direction' property specifies how <i>flexbox items</i> are placed in the flexbox, by setting the direction of the flexbox's <i>main axis</i>. This affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' property.</p>
- The value consists of one or two keywords: the first sets the orientation and direction of the flexbox's <i>main axis</i>, which affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' properties; the second, if specified, marks the flexbox as being multiline and sets 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>
+ The value consists of one or two keywords: the first sets the orientation and direction of the flexbox's <i>main axis</i>, which affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' properties; the second, if specified, marks the flexbox as being <i>multi-line</i> and sets 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>
<dl>
<dt><dfn id='flex-flow-row'>row</dfn></dt>
@@ -580,10 +580,10 @@
<p>The precise effects of this property are articulated in the <a href="#layout-algorithm">Layout Algorithm</a> section.</p>
-<h2 id='multiline'>
+<h2 id='multi-line'>
Multi-line Flexbox</h2>
- <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>A flexbox can be either <i>single-line</i> or <i>multi-line</i>, 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 <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>
@@ -608,7 +608,7 @@
<button id="button4">Wildebeest</button>
</div></pre>
- <p>The buttons are first set to their preferred widths, in this case 80 pixels. This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space. Because the 'flex-flow' property specifies a multiline flexbox (due to the ''wrap'' keyword appearing in its value), the flexbox will create an additional line to contain the last button.</p>
+ <p>The buttons are first set to their preferred widths, in this case 80 pixels. This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space. Because the 'flex-flow' property specifies a multi-line flexbox (due to the ''wrap'' keyword appearing in its value), the flexbox will create an additional line to contain the last button.</p>
<p>Flexibility is applied to each element, separately for each line. The first line has 60 pixels of remaining space and all of the buttons have the same flexibility, so each of the three buttons on that line will receive 20 pixels of extra width, ending up 100px wide. The remaining button is on a line of its own and will stretch to the entire width of the line, or 300 pixels.</p>
@@ -713,7 +713,7 @@
<li>Based on the hypothetical sizes of the items, find the real main size of the flexbox and the hypothetical cross size.</li>
- <li>Based on both of these, linebreak the flexbox if it's multiline. (Or does the possibility of linebreaking affect the main size of the flexbox, in a shrinkwrapping way?)</li>
+ <li>Based on both of these, linebreak the flexbox if it's multi-line. (Or does the possibility of linebreaking affect the main size of the flexbox, in a shrinkwrapping way?)</li>
<li>Resolve any flexible lengths. All items now have a real main size.</li>
@@ -765,7 +765,7 @@
<li>Find the available space of the flexbox (the space inside the flexbox that can be used to lay out children). Basically, how wide would a block be in that situation with "width:fill" (or "auto", in normal block layout), minus margin/border/padding. <span class='issue'>Figure this out by talking with Ojan, etc.</span>
<li>
- <p>If the flexbox is multiline, group the flexbox items into multiple lines:</p>
+ <p>If the flexbox is multi-line, group the flexbox items into multiple lines:</p>
<ol>
<li>Collect as many consecutive flexbox items as possible, starting from the first item, while keeping the sum of their main size smaller than the flexbox's available space. The items so collected form a single flexbox line.</li>
@@ -806,7 +806,6 @@
</ol>
-
<h2 id="pagination">
Page breaks in flexbox</h2>
Received on Thursday, 8 December 2011 00:43:44 UTC