- 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
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
- ‘<code class=css>flex()</code>’ function</a>
+ <li><a href="#flex-notation"><span class=secno>4.1. </span> The
+ ‘<code class=css>flex()</code>’ 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 ‘<code
- class=css>flex()</code>’ function, defined below.
+ class=css>flex()</code>’ notation, defined below.
- <h3 id=flex-function><span class=secno>4.1. </span> The ‘<code
- class=css>flex()</code>’ function</h3>
+ <h3 id=flex-notation><span class=secno>4.1. </span> The ‘<code
+ class=css>flex()</code>’ notation</h3>
- <p>The ‘<code class=css>flex()</code>’ function is used to
+ <p>The ‘<code class=css>flex()</code>’ 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 ‘<code
- class=css>flex()</code>’ function is:
+ class=css>flex()</code>’ notation is:
- <pre
- class=prod>flex( [ <pos-flex> <neg-flex>? ]? || <preferred-size>? )</pre>
+ <pre class=prod><dfn
+ id=ltflex><flex></dfn> = flex( [ <pos-flex> <neg-flex>? ]? || <preferred-size>? )</pre>
<p><code><pos-flex></code> and <code><neg-flex></code> are
non-negative <code><numbers>s</code>, while
<code><preferred-size></code> is any value (other than another
- ‘<code class=css>flex()</code>’ function) that would be valid
- in the ‘<code class=property>width</code>’ or ‘<code
- class=property>height</code>’ property in which the function is
- used. If the <code><preferred-size></code> is ‘<code
+ ‘<a href="#ltflex"><code class=css><flex></code></a>’) that
+ would be valid in the ‘<code class=property>width</code>’ or
+ ‘<code class=property>height</code>’ property in which the
+ notation is used. If the <code><preferred-size></code> is ‘<code
class=css>0</code>’, it <strong>must</strong> be specified with a
unit (like ‘<code class=css>0px</code>’) 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 ‘<code class=css>0px</code>’.
- <p>If the ‘<code class=css>flex()</code>’ function is specified
+ <p>If the ‘<code class=css>flex()</code>’ 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 ‘<code class=css>flex()</code>’ 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 ‘<code class=css>flex()</code>’ function is
- transitionable, by transitioning the <a
+ <p>A ‘<a href="#ltflex"><code class=css><flex></code></a>’
+ 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. ‘<a href="#ltflex"><code
+ class=css><flex></code></a>’ can also transition to and from a
+ <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 <length> (or to/from a <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><flex>, <a href="#ltflex"
+ title="<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( [ <pos-flex> <neg-flex>? ]? || <preferred-size>? )</pre>
+ <pre class=prod><dfn><flex></dfn> = flex( [ <pos-flex> <neg-flex>? ]? || <preferred-size>? )</pre>
- <p><code><pos-flex></code> and <code><neg-flex></code> are non-negative <code><numbers>s</code>, while <code><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><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><pos-flex></code> and <code><neg-flex></code> are non-negative <code><numbers>s</code>, while <code><preferred-size></code> is any value (other than another ''<flex>'') that would be valid in the 'width' or 'height' property in which the notation is used. If the <code><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><pos-flex></code> component sets the length's <i>positive flexibility</i>; if omitted, the <i>positive flexibility</i> defaults to ''1''. The <code><neg-flex></code> component sets the length's <i>negative flexibility</i>; if omitted, it defaults to ''0''. The <code><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 ''<flex>'' value is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently. ''<flex>'' can also transition to and from a <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 <length> (or to/from a <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