- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 14 Jun 2011 01:25:17 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv1882
Modified Files:
Overview.html Overview.src.html
Log Message:
Fixed bug in flex() parsing.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.24
retrieving revision 1.25
diff -u -d -r1.24 -r1.25
--- Overview.html 19 Apr 2011 22:10:50 -0000 1.24
+++ Overview.html 14 Jun 2011 01:25:15 -0000 1.25
@@ -21,12 +21,12 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 19 April 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 14 June 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110419/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110419/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110614/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110614/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -706,8 +706,8 @@
href="#positive-flexibility"><i>positive flexibility</i></a> is set to
the number, the <a href="#negative-flexibility"><i>negative
flexibility</i></a> is set to ‘<code class=css>0</code>’,
- and the <i>preferred size</i> is set to ‘<code
- class=css>auto</code>’.
+ and the <i>preferred size</i> is set to the <length> or
+ <percentage>.
<li>Otherwise, the ‘<code class=css>flex()</code>’ function
is invalid.
@@ -846,9 +846,9 @@
<img alt="In a horizontal flexbox, the measure axis is horizontal, while the length axis is vertical.">
-<p>The measure axis is more interesting, as there are more places where things can potentially flex. As such, there are more controls for specifying how to distribute free space in this axis: the ‘<code class=property>width</code>’ or ‘<code class=property>height</code>’ property starts things off, modified by the ‘<code class=property>flex</code>’ property; the ‘<code class=property>margin</code>’ property gives individual control over spacing between <i>flexbox item</i>s; and the ‘<code class=property>flex-pack</code>’ property gives a more flexbox-global level of control over the between-children spacing.</p>
+<p>The measure axis is more interesting, as there are more places where things can potentially flex. As such, there are more controls for specifying how to distribute free space in this axis: the 'width' or 'height' property starts things off, modified by the 'flex' property; the 'margin' property gives individual control over spacing between <i>flexbox item</i>s; and the 'flex-pack' property gives a more flexbox-global level of control over the between-children spacing.</p>
-<p>In general terms, determining where to allocate free space in the measure axis starts by determining just how much free space there is. All the non-flexible lengths, and the preferred sizes of all the flexible widths or heights, are subtracted from the total width or height of the flexbox. If a positive length is left over, this is split up among all the flexible lengths according to their flexibility. Flexible margins automatically have a flexibility of 1, while widths or heights have their flexibility specified by the ‘<code class=property>flex-grow</code>’ property.</p>
+<p>In general terms, determining where to allocate free space in the measure axis starts by determining just how much free space there is. All the non-flexible lengths, and the preferred sizes of all the flexible widths or heights, are subtracted from the total width or height of the flexbox. If a positive length is left over, this is split up among all the flexible lengths according to their flexibility. Flexible margins automatically have a flexibility of 1, while widths or heights have their flexibility specified by the 'flex-grow' property.</p>
<div class=example>
<p>Three boxes, all with a preferred size of 0, will end up with sizes exactly proportional to their flex-grow values.</p>
@@ -863,16 +863,16 @@
<img alt="">
</div>
-<p>If none of the lengths are flexible, or if all the flexible widths or height have reached their maximum size (if ‘<code class=property>max-width</code>’ or ‘<code class=property>max-height</code>’ properties are in effect), then any leftover space is distributed according to the ‘<code class=property>flex-pack</code>’ property between the margins of the <i>flexbox item</i>s.</p>
+<p>If none of the lengths are flexible, or if all the flexible widths or height have reached their maximum size (if 'max-width' or 'max-height' properties are in effect), then any leftover space is distributed according to the 'flex-pack' property between the margins of the <i>flexbox item</i>s.</p>
<div class=example>
<p>If the flexbox is small enough, then the flexible child can absorb all the space...</p>
<img>
- <p>...but if it gets large enough, there'll be extra space left over for ‘<code class=property>flex-pack</code>’ to distribute.</p>
+ <p>...but if it gets large enough, there'll be extra space left over for 'flex-pack' to distribute.</p>
<img>
</div>
-<p>If the original calculation of how much free space was left gave a negative length (that is, if the preferred sizes of all the <i>flexbox item</i>s sum to a larger length than the width or height of the flexbox), then flexible margins get set to 0, ‘<code class=property>flex-pack</code>’ has no effect, and <i>flexbox item</i>s with a non-zero ‘<code class=property>flex-shrink</code>’ value split the responsibility for shrinking between themselves proportionally. Just like when they grow, their size starts from the preferred size, then combines that with the proportional share of (negative) space.</p>
+<p>If the original calculation of how much free space was left gave a negative length (that is, if the preferred sizes of all the <i>flexbox item</i>s sum to a larger length than the width or height of the flexbox), then flexible margins get set to 0, 'flex-pack' has no effect, and <i>flexbox item</i>s with a non-zero 'flex-shrink' value split the responsibility for shrinking between themselves proportionally. Just like when they grow, their size starts from the preferred size, then combines that with the proportional share of (negative) space.</p>
<div class=example>
<p>When the children are too wide, the shrinkable elements reduce their size to fit...</p>
@@ -1355,15 +1355,15 @@
the following equation applies for calculating the width:
</p>
<blockquote>
- <p>‘<code class=property>margin-left</code>’ + ‘<code class=property>border-left-width</code>’ + ‘<code class=property>padding-left</code>’ + ‘<code class=property>width</code>’ + ‘<code class=property>padding-right</code>’ + ‘<code class=property>border-right-width</code>’ + ‘<code class=property>margin-right</code>’ + scrollbar width (if any) = width of containing block
+ <p>'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar width (if any) = width of containing block
</p>
</blockquote>
- <p>All children of ‘<code class=property>box</code>’ elements are block-level. If inline-level elements are nested
+ <p>All children of 'box' elements are block-level. If inline-level elements are nested
inside boxes, they get wrapped in an anonymous block which then takes part in the
box layout.
</p><p>
- If the width of a child of a flexible box is computed as ‘<code class=property>auto</code>’, then the used value
+ If the width of a child of a flexible box is computed as 'auto', then the used value
is the shrink-to-fit width. This calculation is done similarly to how the width of
a floating element is determined. Otherwise if the width has a computed value,
then that value is used as the width.
@@ -1372,24 +1372,24 @@
In a horizontally oriented box, the flexibility is then applied which may increase
or decrease the used width. In a vertically oriented box, the position and size
of the child may be adjusted by the value of the container's
- <span class="property">‘<code class=property>box-align</code>’</span> property.
+ <span class="property">'box-align'</span> property.
</p><p>
- The <span class="property">‘<code class=property>min-width</code>’</span>, <span class="property">‘<code class=property>min-height</code>’</span>,
- <span class="property">‘<code class=property>max-width</code>’</span>, and <span class="property">‘<code class=property>max-height</code>’</span>
+ The <span class="property">'min-width'</span>, <span class="property">'min-height'</span>,
+ <span class="property">'max-width'</span>, and <span class="property">'max-height'</span>
CSS properties act the same on boxes as on blocks.
</p><p>
The height of a child of a flexible box is determined in the same manner as specified
in the CSS specification. The used height may further be adjusted by the container's
- <span class="property">‘<code class=property>box-align</code>’</span> property in a horizontally
+ <span class="property">'box-align'</span> property in a horizontally
oriented box, or the flexibility in a vertically oriented box.
</p><p>
Note that it is possible for a horizontally oriented box that the height of a
flexible child containing an inline descendant will change when the flexibility is
applied. Similarly, in a vertically oriented box, the height of a child may change
- based on the <span class="property">‘<code class=property>box-align</code>’</span> property of the
+ based on the <span class="property">'box-align'</span> property of the
box.
</p>
-->
@@ -1416,10 +1416,10 @@
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423"><cite>Cascading Style
- Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 23
- April 2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423">http://www.w3.org/TR/2009/CR-CSS2-20090423</a>
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
+ Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
+ 2011. W3C Recommendation. URL: <a
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
</dd>
<!---->
@@ -1538,12 +1538,12 @@
<th>Media
<tbody>
- <tr valign=baseline>
+ <tr>
<td><span class=property>display</span>
<td>flexbox | inline-flexbox
- <tr valign=baseline>
+ <tr>
<td><a class=property href="#flex-align0">flex-align</a>
<td>auto | baseline
@@ -1558,7 +1558,7 @@
<td>visual
- <tr valign=baseline>
+ <tr>
<td><a class=property href="#flex-direction0">flex-direction</a>
<td>lr | rl | tb | bt | inline | inline-reverse | block | block-reverse
@@ -1573,7 +1573,7 @@
<td>visual
- <tr valign=baseline>
+ <tr>
<td><a class=property href="#flex-order0">flex-order</a>
<td><integer>
@@ -1588,7 +1588,7 @@
<td>visual
- <tr valign=baseline>
+ <tr>
<td><a class=property href="#flex-pack0">flex-pack</a>
<td>start | end | center | justify
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.21
retrieving revision 1.22
diff -u -d -r1.21 -r1.22
--- Overview.src.html 19 Apr 2011 22:10:50 -0000 1.21
+++ Overview.src.html 14 Jun 2011 01:25:15 -0000 1.22
@@ -447,7 +447,7 @@
is a <length>, a <percentage>, or a valid keyword for 'width'
or 'height', the <i>positive flexibility</i> is set to the number, the
<i>negative flexibility</i> is set to ''0'', and the <i>preferred size</i>
- is set to ''auto''.</li>
+ is set to the <length> or <percentage>.</li>
<li>Otherwise, the ''flex()'' function is invalid.</li>
</ul>
Received on Tuesday, 14 June 2011 01:25:24 UTC