W3C home > Mailing lists > Public > public-css-commits@w3.org > April 2011

csswg/css3-flexbox Overview.html,1.21,1.22 Overview.src.html,1.18,1.19

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
Message-Id: <E1QAtXs-0006B0-Ql@lionel-hutz.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
+      &lsquo;<code class=css>fr</code>&rsquo; unit</a>
+
+     <li><a href="#flex-function"><span class=secno>5.3. </span> The
       &lsquo;<code class=css>flex()</code>&rsquo; 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>&lsquo;<code class=property>s</code>&rsquo; 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 &lsquo;<code
-   class=css>0</code>&rsquo;, and can be set to a different value with the
-   optional third argument to the &lsquo;<code class=css>flex()</code>&rsquo;
-   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
-   &lsquo;<code class=css>flex()</code>&rsquo; 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
-   &lsquo;<code class=css>flex()</code>&rsquo; 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 &lsquo;<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 &lsquo;<code
+  <h3 id=fraction-unit><span class=secno>5.2. </span> The &lsquo;<code
+   class=css>fr</code>&rsquo; unit</h3>
+
+  <p>The &lsquo;<code class=css>fr</code>&rsquo; 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 &lsquo;<code class=css>fr</code>&rsquo; unit is
+   used, the <i>preferred size</i> of the length is &lsquo;<code
+   class=css>0</code>&rsquo;, 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
+   &lsquo;<code class=css>0</code>&rsquo;.
+
+  <h3 id=flex-function><span class=secno>5.3. </span> The &lsquo;<code
    class=css>flex()</code>&rsquo; function</h3>
 
   <p>The &lsquo;<code class=css>flex()</code>&rsquo; 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
-   &lsquo;<code class=css>flex()</code>&rsquo; function is:
+   href="#negative-flexibility"><i>negative flexibility</i></a>, and the
+   <i>preferred size</i>. The syntax of the &lsquo;<code
+   class=css>flex()</code>&rsquo; function is roughly (see following prose
+   for a precise description):
 
   <pre
-   class=prod>flex( <a href="#positive-flexibility"><i title="positive flexibility">&lt;pos-flex></i></a> [, <a href="#negative-flexibility"><i title="negative flexibility">&lt;neg-flex></i></a> [, <a href="#preferred-size"><i title="preferred size">&lt;preferred-size></i></a> ]? ]? )</pre>
+   class=prod>flex( [ <a href="#positive-flexibility"><i title="positive flexibility">&lt;pos-flex></i></a> || <!--
+	--><a href="#negative-flexibility"><i title="negative flexibility">&lt;neg-flex></i></a> || <!--
+	--><i title="preferred size">&lt;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 &lt;number> -
-   anything else is a syntax error.
+  <dl>
+   <dt>If the &lsquo;<code class=css>flex()</code>&rsquo; 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
-   &lt;number>, with anything else being a syntax error. This argument is
-   optional; if omitted, it defaults to &lsquo;<code
-   class=css>0</code>&rsquo;.
+   <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 &lsquo;<code class=css>0</code>&rsquo;,
+      and the <i>preferred size</i> is set to &lsquo;<code
+      class=css>auto</code>&rsquo;.
 
-  <p>The third and final argument sets the <a
-   href="#preferred-size"><i>preferred size</i></a> of the length. It must be
-   a &lt;length> or a &lt;percentage>, or the keyword &lsquo;<code
-   class=css>auto</code>&rsquo; - anything else is a syntax error. This
-   argument is also optional; if omitted, it defaults to &lsquo;<code
-   class=css>0</code>&rsquo;.
+     <li>Otherwise, if the value is a &lt;length>, a &lt;percentage>, or a
+      valid keyword for &lsquo;<code class=property>width</code>&rsquo; or
+      &lsquo;<code class=property>height</code>&rsquo;, 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 &lsquo;<code class=css>0</code>&rsquo;.
 
-  <p class=issue>The precise syntax of the flex() function is still under
-   discussion.</p>
+     <li>Otherwise, the &lsquo;<code class=css>flex()</code>&rsquo; function
+      is invalid.
+    </ul>
+
+   <dt>If the &lsquo;<code class=css>flex()</code>&rsquo; 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 &lsquo;<code class=css>auto</code>&rsquo;.
+
+     <li>Otherwise, if one value is a non-negative integer and the other is a
+      &lt;length>, a &lt;percentage>, or a valid keyword for &lsquo;<code
+      class=property>width</code>&rsquo; or &lsquo;<code
+      class=property>height</code>&rsquo;, 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 &lsquo;<code class=css>0</code>&rsquo;,
+      and the <i>preferred size</i> is set to &lsquo;<code
+      class=css>auto</code>&rsquo;.
+
+     <li>Otherwise, the &lsquo;<code class=css>flex()</code>&rsquo; function
+      is invalid.
+    </ul>
+
+   <dt>If the &lsquo;<code class=css>flex()</code>&rsquo; function contains
+    three values:
+
+   <dd>
+    <ul>
+     <li>If two of the values are non-negative numbers, and the other is a
+      &lt;length> (with a unit suffix), a &lt;percentage>, or a valid keyword
+      for &lsquo;<code class=property>width</code>&rsquo; or &lsquo;<code
+      class=property>height</code>&rsquo;, 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 &lsquo;<code class=css>flex()</code>&rsquo; function
+      is invalid.
+    </ul>
+  </dl>
+
+  <p class=note>Note that, while &lsquo;<code class=css>0</code>&rsquo;
+   &lt;length>s are normally allowed to be specified without a unit suffix,
+   the definition of the &lsquo;<code class=css>flex()</code>&rsquo; function
+   implicitly disallows this. Allowing a unitless &lsquo;<code
+   class=css>0</code>&rsquo; length would cause ambiguity in some cases; even
+   in the unambiguous cases, the flexible length could instead be written
+   using the &lsquo;<code class=css>fr</code>&rsquo; unit, which is shorter
+   and simpler.</p>
   <!-- ====================================================================== -->
 
   <h2 id=flex-pack><span class=secno>6. </span> The &lsquo;<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&#229;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">&lt;pos-flex></i> [, <i title="negative flexibility">&lt;neg-flex></i> [, <i title="preferred size">&lt;preferred-size></i> ]? ]? )</pre>
+	<pre class=prod>flex( [ <i title="positive flexibility">&lt;pos-flex></i> || <!--
+	--><i title="negative flexibility">&lt;neg-flex></i> || <!--
+	--><i title="preferred size">&lt;preferred-size></i> ] )</pre>
 
-	<p>The first argument sets the <i>positive flexibility</i> of the length.
-	It must be a non-negative &lt;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 &lt;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 &lt;length>, a &lt;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 &lt;length> or a &lt;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 &lt;length>, a &lt;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 &lt;length> (with a unit suffix), a &lt;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'' &lt;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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Saturday, 16 April 2011 00:39:31 GMT