W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-flexbox Overview.html,1.117,1.118 Overview.src.html,1.116,1.117

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 27 Jan 2012 01:22:34 +0000
To: public-css-commits@w3.org
Message-Id: <E1RqaWQ-0000bQ-Me@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv2285

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Editorial tweak: 'flex function' to 'flex notation' or '<flex>'.  Added information to how flex() transitions.  Added an issue about transitioning between <flex> and <length> when it's the only flexible length.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.117
retrieving revision 1.118
diff -u -d -r1.117 -r1.118
--- Overview.html	27 Jan 2012 01:10:30 -0000	1.117
+++ Overview.html	27 Jan 2012 01:22:32 -0000	1.118
@@ -208,8 +208,8 @@
 
    <li><a href="#flexibility"><span class=secno>4. </span> Flexibility</a>
     <ul class=toc>
-     <li><a href="#flex-function"><span class=secno>4.1. </span> The
-      &lsquo;<code class=css>flex()</code>&rsquo; function</a>
+     <li><a href="#flex-notation"><span class=secno>4.1. </span> The
+      &lsquo;<code class=css>flex()</code>&rsquo; notation</a>
 
      <li><a href="#resolving-flexible-lengths"><span class=secno>4.2. </span>
       Resolving Flexible Lengths</a>
@@ -1043,30 +1043,30 @@
    href="#flexbox-item"><i>flexbox items</i></a> "flex", altering their width
    or height to fill the available space. This is done by declaring a <dfn
    id=flexible-length>flexible length</dfn> with the &lsquo;<code
-   class=css>flex()</code>&rsquo; function, defined below.
+   class=css>flex()</code>&rsquo; notation, defined below.
 
-  <h3 id=flex-function><span class=secno>4.1. </span> The &lsquo;<code
-   class=css>flex()</code>&rsquo; function</h3>
+  <h3 id=flex-notation><span class=secno>4.1. </span> The &lsquo;<code
+   class=css>flex()</code>&rsquo; notation</h3>
 
-  <p>The &lsquo;<code class=css>flex()</code>&rsquo; function is used to
+  <p>The &lsquo;<code class=css>flex()</code>&rsquo; notation is used to
    specify the parameters of a <dfn id=flexible-length0
    title="flexible length|flexible lengths|flexible length's">flexible
    length</dfn>: the <dfn id=positive-flexibility
    title="positive flexibility">positive</dfn> and <dfn
    id=negative-flexibility>negative flexibility</dfn>, and the <dfn
    id=preferred-size>preferred size</dfn>. The syntax of the &lsquo;<code
-   class=css>flex()</code>&rsquo; function is:
+   class=css>flex()</code>&rsquo; notation is:
 
-  <pre
-   class=prod>flex( [ &lt;pos-flex> &lt;neg-flex>? ]? || &lt;preferred-size>? )</pre>
+  <pre class=prod><dfn
+   id=ltflex>&lt;flex></dfn> = flex( [ &lt;pos-flex> &lt;neg-flex>? ]? || &lt;preferred-size>? )</pre>
 
   <p><code>&lt;pos-flex></code> and <code>&lt;neg-flex></code> are
    non-negative <code>&lt;numbers>s</code>, while
    <code>&lt;preferred-size></code> is any value (other than another
-   &lsquo;<code class=css>flex()</code>&rsquo; function) that would be valid
-   in the &lsquo;<code class=property>width</code>&rsquo; or &lsquo;<code
-   class=property>height</code>&rsquo; property in which the function is
-   used. If the <code>&lt;preferred-size></code> is &lsquo;<code
+   &lsquo;<a href="#ltflex"><code class=css>&lt;flex></code></a>&rsquo;) that
+   would be valid in the &lsquo;<code class=property>width</code>&rsquo; or
+   &lsquo;<code class=property>height</code>&rsquo; property in which the
+   notation is used. If the <code>&lt;preferred-size></code> is &lsquo;<code
    class=css>0</code>&rsquo;, it <strong>must</strong> be specified with a
    unit (like &lsquo;<code class=css>0px</code>&rsquo;) to avoid ambiguity;
    unitless zero will either be interpreted as as one of the flexibilities,
@@ -1083,21 +1083,35 @@
    href="#preferred-size"><i>preferred size</i></a>; if omitted, it defaults
    to &lsquo;<code class=css>0px</code>&rsquo;.
 
-  <p>If the &lsquo;<code class=css>flex()</code>&rsquo; function is specified
+  <p>If the &lsquo;<code class=css>flex()</code>&rsquo; notation is specified
    on an element that is not a <a href="#flexbox-item"><i>flexbox
    item</i></a>, it computes to the <a href="#preferred-size"><i>preferred
-   size</i></a>. Otherwise, it computes to itself, and is resolved to a
-   length at used-value time by the flexbox layout algorithm.
+   size</i></a>. If the &lsquo;<code class=css>flex()</code>&rsquo; notation
+   is used on a <a href="#flexbox-item"><i>flexbox item's</i></a> <a
+   href="#cross-size-property"><i>cross size property</i></a>, it computes to
+   the <a href="#preferred-size"><i>preferred size</i></a>. Otherwise, it
+   computes to itself, and is resolved to a length at used-value time by the
+   flexbox layout algorithm.
 
-  <p>The &lsquo;<code class=css>flex()</code>&rsquo; function is
-   transitionable, by transitioning the <a
+  <p>A &lsquo;<a href="#ltflex"><code class=css>&lt;flex></code></a>&rsquo;
+   value is transitionable, by transitioning the <a
    href="#preferred-size"><i>preferred size</i></a>, <a
    href="#positive-flexibility"><i>positive flexibility</i></a>, and <a
    href="#negative-flexibility"><i>negative flexibility</i></a>
-   independently.
+   independently. &lsquo;<a href="#ltflex"><code
+   class=css>&lt;flex></code></a>&rsquo; can also transition to and from a
+   &lt;length>, by treating the length as if it were a flexible length with a
+   positive and negative flexibility of zero and a preferred size of the
+   length.
 
   <p class=issue>Examples!
 
+  <p class=issue>Transitioning to/from a &lt;length> (or to/from a &lt;flex>
+   with 0 flexibility) doesn't work well if it's the only flexible item in
+   the flexbox. Rather than smoothly transitioning, it suddenly jumps in size
+   when the flexibility becomes non-zero. Can we fix this, perhaps with a
+   value that represents a percentage of the free space or something?
+
   <h3 id=resolving-flexible-lengths><span class=secno>4.2. </span> Resolving
    Flexible Lengths</h3>
 
@@ -2545,6 +2559,9 @@
    <li>fix min size violations, <a href="#fix-size-constraint-violations"
     title="fix min size violations"><strong>7.</strong></a>
 
+   <li>&lt;flex>, <a href="#ltflex"
+    title="&lt;flex>"><strong>4.1.</strong></a>
+
    <li>flex-align, <a href="#flex-align0"
     title=flex-align><strong>5.2.</strong></a>
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.116
retrieving revision 1.117
diff -u -d -r1.116 -r1.117
--- Overview.src.html	27 Jan 2012 01:10:30 -0000	1.116
+++ Overview.src.html	27 Jan 2012 01:22:32 -0000	1.117
@@ -494,26 +494,28 @@
 <h2 id='flexibility'>
 Flexibility</h2>
 
-	<p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex", altering their width or height to fill the available space.  This is done by declaring a <dfn>flexible length</dfn> with the ''flex()'' function, defined below.</p>
+	<p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex", altering their width or height to fill the available space.  This is done by declaring a <dfn>flexible length</dfn> with the ''flex()'' notation, defined below.</p>
 
 
-<h3 id='flex-function'>
-The ''flex()'' function</h3>
+<h3 id='flex-notation'>
+The ''flex()'' notation</h3>
  
-	<p>The ''flex()'' function is used to specify the parameters of a <dfn title="flexible length|flexible lengths|flexible length's">flexible length</dfn>: the <dfn id="positive-flexibility" title="positive flexibility">positive</dfn> and <dfn>negative flexibility</dfn>, and the <dfn>preferred size</dfn>.  The syntax of the ''flex()'' function is:</p>
+	<p>The ''flex()'' notation is used to specify the parameters of a <dfn title="flexible length|flexible lengths|flexible length's">flexible length</dfn>: the <dfn id="positive-flexibility" title="positive flexibility">positive</dfn> and <dfn>negative flexibility</dfn>, and the <dfn>preferred size</dfn>.  The syntax of the ''flex()'' notation is:</p>
 
-	<pre class=prod>flex( [ &lt;pos-flex> &lt;neg-flex>? ]? || &lt;preferred-size>? )</pre>
+	<pre class=prod><dfn>&lt;flex></dfn> = flex( [ &lt;pos-flex> &lt;neg-flex>? ]? || &lt;preferred-size>? )</pre>
 
-	<p><code>&lt;pos-flex></code> and <code>&lt;neg-flex></code> are non-negative <code>&lt;numbers>s</code>, while <code>&lt;preferred-size></code> is any value (other than another ''flex()'' function) that would be valid in the 'width' or 'height' property in which the function is used.  If the <code>&lt;preferred-size></code> is ''0'', it <strong>must</strong> be specified with a unit (like ''0px'') to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error.</p>
+	<p><code>&lt;pos-flex></code> and <code>&lt;neg-flex></code> are non-negative <code>&lt;numbers>s</code>, while <code>&lt;preferred-size></code> is any value (other than another ''&lt;flex>'') that would be valid in the 'width' or 'height' property in which the notation is used.  If the <code>&lt;preferred-size></code> is ''0'', it <strong>must</strong> be specified with a unit (like ''0px'') to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error.</p>
 
 	<p>The <code>&lt;pos-flex></code> component sets the length's <i>positive flexibility</i>; if omitted, the <i>positive flexibility</i> defaults to ''1''.  The <code>&lt;neg-flex></code> component sets the length's <i>negative flexibility</i>; if omitted, it defaults to ''0''.  The <code>&lt;preferred-size></code> component sets the length's <i>preferred size</i>; if omitted, it defaults to ''0px''.</p>
 
-	<p>If the ''flex()'' function is specified on an element that is not a <i>flexbox item</i>, it computes to the <i>preferred size</i>.  Otherwise, it computes to itself, and is resolved to a length at used-value time by the flexbox layout algorithm.</p>
+	<p>If the ''flex()'' notation is specified on an element that is not a <i>flexbox item</i>, it computes to the <i>preferred size</i>.  If the ''flex()'' notation is used on a <i>flexbox item's</i> <i>cross size property</i>, it computes to the <i>preferred size</i>.  Otherwise, it computes to itself, and is resolved to a length at used-value time by the flexbox layout algorithm.</p>
 
-	<p>The ''flex()'' function is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently.</p>
+	<p>A ''&lt;flex>'' value is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently.  ''&lt;flex>'' can also transition to and from a &lt;length>, by treating the length as if it were a flexible length with a positive and negative flexibility of zero and a preferred size of the length.</p>
 
 	<p class='issue'>Examples!</p>
 
+	<p class='issue'>Transitioning to/from a &lt;length> (or to/from a &lt;flex> with 0 flexibility) doesn't work well if it's the only flexible item in the flexbox.  Rather than smoothly transitioning, it suddenly jumps in size when the flexibility becomes non-zero.  Can we fix this, perhaps with a value that represents a percentage of the free space or something?</p>
+
 
 <h3 id='resolving-flexible-lengths'>
 Resolving Flexible Lengths</h3>
Received on Friday, 27 January 2012 01:22:37 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:09 UTC