- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 19 Apr 2011 20:08:47 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv3101
Modified Files:
Overview.html Overview.src.html
Log Message:
Changed the "Flexibility" opening to not imply that paddings and margins can take <flex> values.
Changed the flex() function to accept unitless 0 as the third value.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.22
retrieving revision 1.23
diff -u -d -r1.22 -r1.23
--- Overview.html 16 Apr 2011 00:39:26 -0000 1.22
+++ Overview.html 19 Apr 2011 20:08:45 -0000 1.23
@@ -21,12 +21,12 @@
<h1 id=head-box-flexible>Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 16 April 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 19 April 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110416/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110416/</a></dd> -->
+ <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> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -579,16 +579,16 @@
<p>The defining aspect of flexbox layout is the ability to make various
lengths of the <a href="#flexbox-item"><i>flexbox item</i></a>s flexible.
- Flexible lengths can be used for the ‘<code
- class=property>width</code>’, ‘<code
+ The ‘<code class=property>width</code>’, ‘<code
class=property>height</code>’, ‘<code
class=property>padding</code>’, and ‘<code
- class=property>margin</code>’ properties of <a
- href="#flexbox-item"><i>flexbox item</i></a>s. A <dfn
- id=flexible-length>flexible length</dfn> can grow if the flexbox has extra
- space available, or shrink if the flexbox would otherwise overflow. The
- ‘<code class=css>flex()</code>’ function is used to specify a
- <a href="#flexible-length"><i>flexible length</i></a> and it's parameters.
+ class=property>margin</code>’ properties of a <a
+ href="#flexbox-item"><i>flexbox item</i></a> can all be made flexible.
+ Paddings and margins are made flexible by setting their value to
+ ‘<code class=css>auto</code>’, while the width and height of a
+ box can be controlled more precisely with the ‘<code
+ class=css>fr</code>’ unit or the ‘<code
+ class=css>flex()</code>’ function, both defined below.
<div class=example>
<p class=issue>TODO: Examples!</p>
@@ -597,13 +597,12 @@
<h3 id=resolving-flexible-lengths><span class=secno>5.1. </span> Resolving
Flexible Lengths</h3>
- <p>CSS resolves a <a href="#flexible-length"><i>flexible length</i></a>
- into a definite length by first collecting all the lengths, flexible or
- inflexible, that will share some space. For example, for a horizontal
- flexbox, the lengths of the left and right margins, left and right
- borders, left and right paddings, and widths of all <a
- href="#flexbox-item"><i>flexbox item</i></a>s share the width of the
- flexbox itself. Conversely, each <a href="#flexbox-item"><i>flexbox
+ <p>CSS resolves a <i>flexible length</i> into a definite length by first
+ collecting all the lengths, flexible or inflexible, that will share some
+ space. For example, for a horizontal flexbox, the lengths of the left and
+ right margins, left and right borders, left and right paddings, and widths
+ of all <a href="#flexbox-item"><i>flexbox item</i></a>s share the width of
+ the flexbox itself. Conversely, each <a href="#flexbox-item"><i>flexbox
item</i></a>‘<code class=property>s</code>’ vertical margins,
borders, padding, and height individually share the height of the flexbox.
@@ -619,15 +618,13 @@
<i>preferred size</i>. If the sum of all the <a href="#preflex-size"><i
title="preflex size">preflex sizes</i></a> is less than the available
width/height of the flexbox, then the difference is split up among all the
- <a href="#flexible-length"><i title="flexible length">flexible
- lengths</i></a> with <dfn id=positive-flexibility>positive
- flexibility</dfn>, with the space divvied up proportionally to the
- flexibility of each length. If the sum is greater than the available
- width/height, then all the <a href="#flexible-length"><i title="flexible
- length">flexible lengths</i></a> with <dfn
- id=negative-flexibility>negative flexibility</dfn> shrink in proportion to
- their flexibility to try and make the sum equal the available
- width/height.
+ <i title="flexible length">flexible lengths</i> with <dfn
+ id=positive-flexibility>positive flexibility</dfn>, with the space divvied
+ up proportionally to the flexibility of each length. If the sum is greater
+ than the available width/height, then all the <i title="flexible
+ length">flexible lengths</i> with <dfn id=negative-flexibility>negative
+ flexibility</dfn> shrink in proportion to their flexibility to try and
+ make the sum equal the available width/height.
<p>The ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ and ‘<a
@@ -653,8 +650,8 @@
class=css>flex()</code>’ function</h3>
<p>The ‘<code class=css>flex()</code>’ function is used to
- specify the parameters of a <a href="#flexible-length"><i>flexible
- length</i></a>: the <a href="#positive-flexibility"><i title="positive
+ specify the parameters of a <i>flexible length</i>: the <a
+ href="#positive-flexibility"><i title="positive
flexibility">positive</i></a> and <a
href="#negative-flexibility"><i>negative flexibility</i></a>, and the
<i>preferred size</i>. The syntax of the ‘<code
@@ -721,10 +718,17 @@
<dd>
<ul>
- <li>If two of the values are non-negative numbers, and the other is a
- <length> (with a unit suffix), a <percentage>, or a valid keyword
- for ‘<code class=property>width</code>’ or ‘<code
- class=property>height</code>’, the <a
+ <li>If the first two values are non-negative numbers and the third value
+ is ‘<code class=css>0</code>’, the <a
+ href="#positive-flexibility"><i>positive flexibility</i></a> is set to
+ the first value, the <a href="#negative-flexibility"><i>negative
+ flexibility</i></a> is set to the second value, and the <i>preferred
+ size</i> is set to ‘<code class=css>0px</code>’.
+
+ <li>Otherwise, If two of the values are non-negative numbers, and the
+ other is a <length> (with a unit suffix), a <percentage>, or a
+ valid keyword for ‘<code class=property>width</code>’ or
+ ‘<code class=property>height</code>’, the <a
href="#positive-flexibility"><i>positive flexibility</i></a> is set to
the first number, the <a href="#negative-flexibility"><i>negative
flexibility</i></a> is set to the second number, and the <i>preferred
@@ -790,10 +794,9 @@
<p>Between and around the margins of <a href="#flexbox-item"><i>flexbox
item</i></a>s there are additional flexible lengths, called <dfn
id=packing-space>packing space</dfn>. Packing space can absorb leftover
- free space in a flexbox if there aren't any other <a
- href="#flexible-length"><i>flexible length</i></a>s, or if all the <a
- href="#flexible-length"><i>flexible length</i></a>s have reached their
- maximum size. The ‘<a href="#flex-pack0"><code
+ free space in a flexbox if there aren't any other <i>flexible length</i>s,
+ or if all the <i>flexible length</i>s have reached their maximum size. The
+ ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ property defines the
flexibility of these packing spaces:
@@ -925,11 +928,10 @@
<p>By default, laying out <a href="#flexbox-item"><i>flexbox item</i></a>s
in the <a href="#length-axis"><i>length axis</i></a> is a simple matter of
- determining free space and then splitting it between any <a
- href="#flexible-length"><i>flexible length</i></a>s in that axis. This is
- not always sufficient, however; in particular, it is often useful to align
- <a href="#flexbox-item"><i>flexbox item</i></a>s by their baseline. The
- ‘<a href="#flex-align0"><code
+ determining free space and then splitting it between any <i>flexible
+ length</i>s in that axis. This is not always sufficient, however; in
+ particular, it is often useful to align <a href="#flexbox-item"><i>flexbox
+ item</i></a>s by their baseline. The ‘<a href="#flex-align0"><code
class=property>flex-align</code></a>’ property changes the way free
space is allocated in the <a href="#length-axis"><i>length axis</i></a>.
@@ -937,8 +939,8 @@
<dt>auto
<dd>Allocate free space in the <a href="#length-axis"><i>length
- axis</i></a> as normal, by distributing it proportionally between <a
- href="#flexible-length"><i>flexible length</i></a>s in that axis.
+ axis</i></a> as normal, by distributing it proportionally between
+ <i>flexible length</i>s in that axis.
<dt>baseline
@@ -1414,16 +1416,16 @@
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
- href="http://www.w3.org/TR/2010/WD-CSS2-20101207"><cite>Cascading Style
- Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 December
- 2010. W3C Working Draft. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2010/WD-CSS2-20101207">http://www.w3.org/TR/2010/WD-CSS2-20101207</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>
</dd>
<!---->
<dt id=CSS3VAL>[CSS3VAL]
- <dd>Chris Lilley; Håkon Wium Lie. <a
+ <dd>Håkon Wium Lie; Chris Lilley. <a
href="http://www.w3.org/TR/2006/WD-css3-values-20060919"><cite>CSS3
Values and Units.</cite></a> 19 September 2006. W3C Working Draft. (Work
in progress.) URL: <a
@@ -1454,9 +1456,6 @@
<li>flex-direction, <a href="#flex-direction0"
title=flex-direction><strong>3.</strong></a>
- <li>flexible length, <a href="#flexible-length" title="flexible
- length"><strong>5.</strong></a>
-
<li>flex-order, <a href="#flex-order0"
title=flex-order><strong>4.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.19
retrieving revision 1.20
diff -u -d -r1.19 -r1.20
--- Overview.src.html 16 Apr 2011 00:39:26 -0000 1.19
+++ Overview.src.html 19 Apr 2011 20:08:45 -0000 1.20
@@ -356,12 +356,12 @@
Flexibility</h2>
<p>The defining aspect of flexbox layout is the ability to make various lengths
- of the <i>flexbox item</i>s flexible. Flexible lengths can be used for the 'width',
- 'height', 'padding', and 'margin' properties of <i>flexbox item</i>s. A
- <dfn>flexible length</dfn> can grow if the flexbox has extra space available,
- or shrink if the flexbox would otherwise overflow. The ''flex()'' function
- is used to specify a <i>flexible length</i> and it's parameters.</p>
-
+ of the <i>flexbox item</i>s flexible. The 'width', 'height', 'padding', and
+ 'margin' properties of a <i>flexbox item</i> can all be made flexible. Paddings
+ and margins are made flexible by setting their value to ''auto'', while the
+ width and height of a box can be controlled more precisely with the ''fr''
+ unit or the ''flex()'' function, both defined below.</p>
+
<div class=example>
<p class=issue>TODO: Examples!</p>
</div>
@@ -456,7 +456,12 @@
<dt>If the ''flex()'' function contains three values:</dt>
<dd>
<ul>
- <li>If two of the values are non-negative numbers, and the other
+ <li>If the first two values are non-negative numbers and the third
+ value is ''0'', the <i>positive flexibility</i> is set to the first
+ value, the <i>negative flexibility</i> is set to the second value,
+ and the <i>preferred size</i> is set to ''0px''.</li>
+
+ <li>Otherwise, If two of the values are non-negative numbers, and the other
is a <length> (with a unit suffix), a <percentage>, or a
valid keyword for 'width' or 'height', the <i>positive flexibility</i>
is set to the first number, the <i>negative flexibility</i> is set
Received on Tuesday, 19 April 2011 20:08:49 UTC