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

csswg/css3-flexbox Overview.html,1.22,1.23 Overview.src.html,1.19,1.20

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
Message-Id: <E1QCHE7-0000qc-Ek@lionel-hutz.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 &lsquo;<code
-   class=property>width</code>&rsquo;, &lsquo;<code
+   The &lsquo;<code class=property>width</code>&rsquo;, &lsquo;<code
    class=property>height</code>&rsquo;, &lsquo;<code
    class=property>padding</code>&rsquo;, and &lsquo;<code
-   class=property>margin</code>&rsquo; 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
-   &lsquo;<code class=css>flex()</code>&rsquo; function is used to specify a
-   <a href="#flexible-length"><i>flexible length</i></a> and it's parameters.
+   class=property>margin</code>&rsquo; 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
+   &lsquo;<code class=css>auto</code>&rsquo;, while the width and height of a
+   box can be controlled more precisely with the &lsquo;<code
+   class=css>fr</code>&rsquo; unit or the &lsquo;<code
+   class=css>flex()</code>&rsquo; 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>&lsquo;<code class=property>s</code>&rsquo; 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 &lsquo;<a href="#flex-pack0"><code
    class=property>flex-pack</code></a>&rsquo; and &lsquo;<a
@@ -653,8 +650,8 @@
    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
+   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 &lsquo;<code
@@ -721,10 +718,17 @@
 
    <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
+     <li>If the first two values are non-negative numbers and the third value
+      is &lsquo;<code class=css>0</code>&rsquo;, 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>0px</code>&rsquo;.
+
+     <li>Otherwise, 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
@@ -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 &lsquo;<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
+   &lsquo;<a href="#flex-pack0"><code
    class=property>flex-pack</code></a>&rsquo; 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
-   &lsquo;<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 &lsquo;<a href="#flex-align0"><code
    class=property>flex-align</code></a>&rsquo; 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&#160;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&#229;kon Wium Lie. <a
+   <dd>H&#229;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 &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 
Received on Tuesday, 19 April 2011 20:08:49 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 April 2011 20:08:50 GMT