- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 16 Apr 2011 00:39:28 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv23674
Modified Files:
Overview.html Overview.src.html
Log Message:
Added the 'fr' unit.
Changed the 'flex()' function to the new syntax discussed on the list.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.21
retrieving revision 1.22
diff -u -d -r1.21 -r1.22
--- Overview.html 8 Apr 2011 00:50:48 -0000 1.21
+++ Overview.html 16 Apr 2011 00:39:26 -0000 1.22
@@ -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, 8 April 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 16 April 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110408/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110408/</a></dd> -->
+ <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> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -156,7 +156,10 @@
<li><a href="#resolving-flexible-lengths"><span class=secno>5.1. </span>
Resolving Flexible Lengths</a>
- <li><a href="#flex-function"><span class=secno>5.2. </span> The
+ <li><a href="#fraction-unit"><span class=secno>5.2. </span> The
+ ‘<code class=css>fr</code>’ unit</a>
+
+ <li><a href="#flex-function"><span class=secno>5.3. </span> The
‘<code class=css>flex()</code>’ function</a>
</ul>
@@ -600,9 +603,9 @@
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 <i title="<i>flexbox item</i>s">flexbox
- item's</i> vertical margins, borders, padding, and height individually
- share the height of the flexbox.
+ 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.
<div class=figure>
<p class="caption issue">TODO: Diagram showing the relevant lengths in
@@ -613,26 +616,17 @@
in each set. The <a href="#preflex-size"><i>preflex size</i></a> of an
inflexible length is just the length itself. The <a
href="#preflex-size"><i>preflex size</i></a> of a flexible length is its
- <a href="#preferred-size"><i>preferred size</i></a>. The <dfn
- id=preferred-size>preferred size</dfn> defaults to ‘<code
- class=css>0</code>’, and can be set to a different value with the
- optional third argument to the ‘<code class=css>flex()</code>’
- function (defined below).
-
- <p>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
+ <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> (a non-zero value for the first argument to the
- ‘<code class=css>flex()</code>’ function), 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> (a non-zero value for the second argument to the
- ‘<code class=css>flex()</code>’ function) shrink in proportion
- to their flexibility to try and make the sum equal the available
+ 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.
<p>The ‘<a href="#flex-pack0"><code
@@ -642,39 +636,113 @@
precise details of how free space is determined and assigned to flexible
lengths is detailed in a later chapter.
- <h3 id=flex-function><span class=secno>5.2. </span> The ‘<code
+ <h3 id=fraction-unit><span class=secno>5.2. </span> The ‘<code
+ class=css>fr</code>’ unit</h3>
+
+ <p>The ‘<code class=css>fr</code>’ unit, defined in the Values
+ and Units spec <a href="#CSS3VAL"
+ rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, can be used to specify a
+ flexible length. When the ‘<code class=css>fr</code>’ unit is
+ used, the <i>preferred size</i> of the length is ‘<code
+ class=css>0</code>’, the <a href="#positive-flexibility"><i>positive
+ flexibility</i></a> is equal to the numeric part of the value, and the <a
+ href="#negative-flexibility"><i>negative flexibility</i></a> is
+ ‘<code class=css>0</code>’.
+
+ <h3 id=flex-function><span class=secno>5.3. </span> The ‘<code
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
flexibility">positive</i></a> and <a
- href="#negative-flexibility"><i>negative flexibility</i></a>, and the <a
- href="#preferred-size"><i>preferred size</i></a>. The syntax of the
- ‘<code class=css>flex()</code>’ function is:
+ href="#negative-flexibility"><i>negative flexibility</i></a>, and the
+ <i>preferred size</i>. The syntax of the ‘<code
+ class=css>flex()</code>’ function is roughly (see following prose
+ for a precise description):
<pre
- class=prod>flex( <a href="#positive-flexibility"><i title="positive flexibility"><pos-flex></i></a> [, <a href="#negative-flexibility"><i title="negative flexibility"><neg-flex></i></a> [, <a href="#preferred-size"><i title="preferred size"><preferred-size></i></a> ]? ]? )</pre>
+ class=prod>flex( [ <a href="#positive-flexibility"><i title="positive flexibility"><pos-flex></i></a> || <!--
+ --><a href="#negative-flexibility"><i title="negative flexibility"><neg-flex></i></a> || <!--
+ --><i title="preferred size"><preferred-size></i> ] )</pre>
- <p>The first argument sets the <a href="#positive-flexibility"><i>positive
- flexibility</i></a> of the length. It must be a non-negative <number> -
- anything else is a syntax error.
+ <dl>
+ <dt>If the ‘<code class=css>flex()</code>’ function contains a
+ single value:
- <p>The second argument sets the <a href="#negative-flexibility"><i>negative
- flexibility</i></a> of the length. It must also be a non-negative
- <number>, with anything else being a syntax error. This argument is
- optional; if omitted, it defaults to ‘<code
- class=css>0</code>’.
+ <dd>
+ <ul>
+ <li>If the value is a non-negative number, the <a
+ href="#positive-flexibility"><i>positive flexibility</i></a> is set to
+ that value, 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>’.
- <p>The third and final argument sets the <a
- href="#preferred-size"><i>preferred size</i></a> of the length. It must be
- a <length> or a <percentage>, or the keyword ‘<code
- class=css>auto</code>’ - anything else is a syntax error. This
- argument is also optional; if omitted, it defaults to ‘<code
- class=css>0</code>’.
+ <li>Otherwise, if the value is a <length>, a <percentage>, or a
+ valid keyword for ‘<code class=property>width</code>’ or
+ ‘<code class=property>height</code>’, the <i>preferred
+ size</i> is set to that value, the <a
+ href="#positive-flexibility"><i>positive flexibility</i></a> is set to
+ 1, and the <a href="#negative-flexibility"><i>negative
+ flexibility</i></a> is set to ‘<code class=css>0</code>’.
- <p class=issue>The precise syntax of the flex() function is still under
- discussion.</p>
+ <li>Otherwise, the ‘<code class=css>flex()</code>’ function
+ is invalid.
+ </ul>
+
+ <dt>If the ‘<code class=css>flex()</code>’ function contains
+ two values:
+
+ <dd>
+ <ul>
+ <li>If both values are non-negative numbers, 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>auto</code>’.
+
+ <li>Otherwise, if one value is a non-negative integer and the other is a
+ <length>, 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 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>’.
+
+ <li>Otherwise, the ‘<code class=css>flex()</code>’ function
+ is invalid.
+ </ul>
+
+ <dt>If the ‘<code class=css>flex()</code>’ function contains
+ three values:
+
+ <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
+ 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
+ size</i> is set to the other value.
+
+ <li>Otherwise, the ‘<code class=css>flex()</code>’ function
+ is invalid.
+ </ul>
+ </dl>
+
+ <p class=note>Note that, while ‘<code class=css>0</code>’
+ <length>s are normally allowed to be specified without a unit suffix,
+ the definition of the ‘<code class=css>flex()</code>’ function
+ implicitly disallows this. Allowing a unitless ‘<code
+ class=css>0</code>’ length would cause ambiguity in some cases; even
+ in the unambiguous cases, the flexible length could instead be written
+ using the ‘<code class=css>fr</code>’ unit, which is shorter
+ and simpler.</p>
<!-- ====================================================================== -->
<h2 id=flex-pack><span class=secno>6. </span> The ‘<a
@@ -1352,6 +1420,16 @@
href="http://www.w3.org/TR/2010/WD-CSS2-20101207">http://www.w3.org/TR/2010/WD-CSS2-20101207</a>
</dd>
<!---->
+
+ <dt id=CSS3VAL>[CSS3VAL]
+
+ <dd>Chris Lilley; Håkon Wium Lie. <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
+ href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
+ </dd>
+ <!---->
</dl>
<!--end-normative-->
@@ -1424,9 +1502,6 @@
<li>positive flexibility, <a href="#positive-flexibility" title="positive
flexibility"><strong>5.1.</strong></a>
- <li>preferred size, <a href="#preferred-size" title="preferred
- size"><strong>5.1.</strong></a>
-
<li>preflex size, <a href="#preflex-size" title="preflex
size"><strong>5.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -d -r1.18 -r1.19
--- Overview.src.html 8 Apr 2011 00:49:05 -0000 1.18
+++ Overview.src.html 16 Apr 2011 00:39:26 -0000 1.19
@@ -285,7 +285,7 @@
<!-- ====================================================================== -->
-<h2 id=flex-order>
+<h2 id='flex-order'>
Display Order: the 'flex-order' property</h2>
<p><i>flexbox item</i>s are, by default, displayed and laid out in the same order
@@ -373,7 +373,7 @@
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 <i>flexbox item</i>s share
- the width of the flexbox itself. Conversely, each <i title="<i>flexbox item</i>s">flexbox item's</i>
+ the width of the flexbox itself. Conversely, each <i>flexbox item</i>'s'
vertical margins, borders, padding, and height individually share the height
of the flexbox.</p>
@@ -384,48 +384,95 @@
<p>CSS then sums the <dfn>preflex size</dfn> of the lengths in each set. The
<i>preflex size</i> of an inflexible length is just the length itself. The
- <i>preflex size</i> of a flexible length is its <i>preferred size</i>. The
- <dfn>preferred size</dfn> defaults to ''0'', and can be set to a different value
- with the optional third argument to the ''flex()'' function (defined below).</p>
-
- <p>If the sum of all the <i title="preflex size">preflex sizes</i> is less than
- the available width/height of the flexbox, then the difference is split up among all the
- <i title="flexible length">flexible lengths</i> with <dfn>positive flexibility</dfn>
- (a non-zero value for the first argument to the ''flex()'' function), 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>preflex size</i> of a flexible length is its <i>preferred size</i>. If the
+ sum of all the <i title="preflex size">preflex sizes</i> is less than the
+ available width/height of the flexbox, then the difference is split up among all the
+ <i title="flexible length">flexible lengths</i> with <dfn>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>negative flexibility</dfn>
- (a non-zero value for the second argument to the ''flex()'' function) shrink
- in proportion to their flexibility to try and make the sum equal the available
- width/height.</p>
+ shrink in proportion to their flexibility to try and make the sum equal the
+ available width/height.</p>
<p>The 'flex-pack' and 'flex-align' properties offer more complex control over
free-space distribution. The precise details of how free space is determined
and assigned to flexible lengths is detailed in a later chapter.</p>
+
+<h3 id='fraction-unit'>
+The ''fr'' unit</h3>
+
+ <p>The ''fr'' unit, defined in the Values and Units spec [[!CSS3VAL]], can be
+ used to specify a flexible length. When the ''fr'' unit is used, the <i>preferred size</i>
+ of the length is ''0'', the <i>positive flexibility</i> is equal to the numeric
+ part of the value, and the <i>negative flexibility</i> is ''0''.</p>
-<h3 id=flex-function>
+<h3 id='flex-function'>
The ''flex()'' function</h3>
<p>The ''flex()'' function is used to specify the parameters of a
<i>flexible length</i>: the <i title="positive flexibility">positive</i>
and <i>negative flexibility</i>, and the <i>preferred size</i>. The syntax
- of the ''flex()'' function is:</p>
+ of the ''flex()'' function is roughly (see following prose for a precise
+ description):</p>
- <pre class=prod>flex( <i title="positive flexibility"><pos-flex></i> [, <i title="negative flexibility"><neg-flex></i> [, <i title="preferred size"><preferred-size></i> ]? ]? )</pre>
+ <pre class=prod>flex( [ <i title="positive flexibility"><pos-flex></i> || <!--
+ --><i title="negative flexibility"><neg-flex></i> || <!--
+ --><i title="preferred size"><preferred-size></i> ] )</pre>
- <p>The first argument sets the <i>positive flexibility</i> of the length.
- It must be a non-negative <number> - anything else is a syntax error.</p>
+ <dl>
+ <dt>If the ''flex()'' function contains a single value:</dt>
+ <dd>
+ <ul>
+ <li>If the value is a non-negative number, the <i>positive flexibility</i>
+ is set to that value, the <i>negative flexibility</i> is set to
+ ''0'', and the <i>preferred size</i> is set to ''auto''.</li>
- <p>The second argument sets the <i>negative flexibility</i> of the length.
- It must also be a non-negative <number>, with anything else being a syntax
- error. This argument is optional; if omitted, it defaults to ''0''.</p>
+ <li>Otherwise, if the value is a <length>, a <percentage>,
+ or a valid keyword for 'width' or 'height', the <i>preferred size</i>
+ is set to that value, the <i>positive flexibility</i> is set to
+ 1, and the <i>negative flexibility</i> is set to ''0''.</li>
- <p>The third and final argument sets the <i>preferred size</i> of the length.
- It must be a <length> or a <percentage>, or the keyword ''auto'' -
- anything else is a syntax error. This argument is also optional; if omitted,
- it defaults to ''0''.</p>
+ <li>Otherwise, the ''flex()'' function is invalid.</li>
+ </ul>
+ </dd>
- <p class=issue>The precise syntax of the flex() function is still under discussion.</p>
+ <dt>If the ''flex()'' function contains two values:</dt>
+ <dd>
+ <ul>
+ <li>If both values are non-negative numbers, 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 ''auto''.</li>
+
+ <li>Otherwise, if one value is a non-negative integer and the other
+ 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>
+
+ <li>Otherwise, the ''flex()'' function is invalid.</li>
+ </ul>
+ </dd>
+
+ <dt>If the ''flex()'' function contains three values:</dt>
+ <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 'width' or 'height', the <i>positive flexibility</i>
+ is set to the first number, the <i>negative flexibility</i> is set
+ to the second number, and the <i>preferred size</i> is set to the
+ other value.</li>
+
+ <li>Otherwise, the ''flex()'' function is invalid.</li>
+ </ul>
+ </dd>
+ </dt>
+
+ <p class='note'>Note that, while ''0'' <length>s are normally allowed to
+ be specified without a unit suffix, the definition of the ''flex()'' function
+ implicitly disallows this. Allowing a unitless ''0'' length would cause
+ ambiguity in some cases; even in the unambiguous cases, the flexible length
+ could instead be written using the ''fr'' unit, which is shorter and simpler.</p>
<!-- ====================================================================== -->
Received on Saturday, 16 April 2011 00:39:30 UTC