changed flex() function to 'flex' property

a few small editorial changes

Author: alexmog1

css3-flexbox/Overview.html

@@ -214,7 +214,7 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
     </ul>
 
    <li><a href="#flexibility"><span class=secno>4. </span> Flexibility: the
-    &lsquo;<code class=css>flex()</code>&rsquo; notation</a>
+    &lsquo;<code class=property>flex</code>&rsquo; property</a>
 
    <li><a href="#alignment"><span class=secno>5. </span> Alignment</a>
     <ul class=toc>
@@ -341,10 +341,7 @@ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   <h3 id=placement><span class=secno>1.1. </span> Module interactions</h3>
 
   <p>This module extends the definition of the &lsquo;<code
-   class=property>display</code>&rsquo; property. It also defines a new type
-   of primitive value, the <a href="#flex-function">flex() notation</a>,
-   which is accepted by the &lsquo;<code class=property>width</code>&rsquo;
-   and &lsquo;<code class=property>height</code>&rsquo; properties.
+   class=property>display</code>&rsquo; property.
 
   <h3 id=values><span class=secno>1.2. </span> Values</h3>
 
@@ -418,19 +415,17 @@ <h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
   <p>The contents of a flexbox can be easily and powerfully manipulated with
    a handful of properties. Most significantly, <a
    href="#flexbox-item"><i>flexbox items</i></a> can "flex" their <a
-   href="#main-size"><i>main size</i></a> by using the &lsquo;<code
-   class=css>flex()</code>&rsquo; function in the &lsquo;<code
-   class=property>width</code>&rsquo; or &lsquo;<code
-   class=property>height</code>&rsquo; property. This "flexing" allows the
-   items to get bigger or smaller based on the available space in the page.
-   If there is leftover space in the flexbox after all of the <a
-   href="#flexbox-item"><i>flexbox items</i></a> have finished flexing, the
-   items can be aligned, centered, or distributed with the &lsquo;<a
-   href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;
-   property. <a href="#flexbox-item"><i>Flexbox items</i></a> can also be
-   completely rearranged within the flexbox with the &lsquo;<a
-   href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
-   property.
+   href="#main-size"><i>main size</i></a> by using the &lsquo;<a
+   href="#flex"><code class=property>flex</code></a>&rsquo; property. This
+   "flexing" allows the items to get bigger or smaller based on the available
+   space in the page. If there is leftover space in the flexbox after all of
+   the <a href="#flexbox-item"><i>flexbox items</i></a> have finished
+   flexing, the items can be aligned, centered, or distributed with the
+   &lsquo;<a href="#flex-pack0"><code
+   class=property>flex-pack</code></a>&rsquo; property. <a
+   href="#flexbox-item"><i>Flexbox items</i></a> can also be completely
+   rearranged within the flexbox with the &lsquo;<a href="#flex-order0"><code
+   class=property>flex-order</code></a>&rsquo; property.
 
   <p>In the <a href="#cross-axis"><i>cross axis</i></a>, <a
    href="#flexbox-item"><i>flexbox items</i></a> can either "flex" to fill
@@ -509,6 +504,13 @@ <h3 id=display-flexbox><span class=secno>2.1. </span> New values for
    Additionally, each of the <a href="#flexbox-item"><i>flexbox items</i></a>
    establish a new formatting context for its contents.
 
+  <p class=issue>Although the term "flexbox formatting context" is defined
+   here, it is not used anywhere else. BFC is the commonly used term for what
+   it means here. Perhaps this could say that flexbox formatting context *is*
+   a block formatting context, with different rules for how blocks are
+   formatted but same protection from external floats etc. Then the terms can
+   be used interchangeably, as they will be anyway...
+
   <h3 id=flex-items><span class=secno>2.2. </span> Flexbox Items</h3>
 
   <p class=issue>Add a &lsquo;<code
@@ -1001,10 +1003,6 @@ <h3 id=flex-order><span class=secno>3.4. </span> Display Order: the
 .tabs > .current {
 	flex-order: -1; /* Lower than the default of 0 */
 }</pre>
-
-   <p>You can also see a <a href=flex-order-example.html>working example</a>
-    in some modern browsers (modern WebKit, Firefox, or any browser that
-    supports the Flexbox spec).</p>
   </div>
 
   <div class=example>
@@ -1040,7 +1038,7 @@ <h3 id=flex-order><span class=secno>3.4. </span> Display Order: the
 
    <pre>
 #main { display: flexbox; }
-#main > article { width: flex(1); flex-order: 2; }
+#main > article { flex:1;         flex-order: 2; }
 #main > nav     { width: 200px;   flex-order: 1; }
 #main > aside   { width: 200px;   flex-order: 3; }</pre>
 
@@ -1063,73 +1061,128 @@ <h3 id=flex-order><span class=secno>3.4. </span> Display Order: the
     intelligent wrapping left as an exercise for the reader.)</small></p>
   </div>
 
-  <h2 id=flexibility><span class=secno>4. </span> Flexibility: the
-   &lsquo;<code class=css>flex()</code>&rsquo; notation</h2>
+  <h2 id=flexibility><span class=secno>4. </span> Flexibility: the &lsquo;<a
+   href="#flex"><code class=property>flex</code></a>&rsquo; property</h2>
 
   <p>The defining aspect of flexbox layout is the ability to make the <a
    href="#flexbox-item"><i>flexbox items</i></a> "flex", altering their width
    or height to fill the available space. This is done by using a &lsquo;<a
-   href="#ltflex"><code class=css>&lt;flex></code></a>&rsquo; value in the
-   element's &lsquo;<code class=property>width</code>&rsquo; or &lsquo;<code
-   class=property>height</code>&rsquo; property. A flexbox distributes free
-   space to its items proportional to their positive flexibility, or shrinks
-   them to prevent overflow proportional to their negative flexibility.
-
-  <p>The &lsquo;<code class=css>flex()</code>&rsquo; notation is used to
-   specify the parameters of a <dfn id=flexible-length
+   href="#flex"><code class=property>flex</code></a>&rsquo; property. A
+   flexbox distributes free space to its items proportional to their positive
+   flexibility, or shrinks them to prevent overflow proportional to their
+   negative flexibility.
+
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=flex>flex</dfn>
+
+    <tr>
+     <th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
+
+     <td>[[ &lt;pos-flex> &lt;neg-flex>? ]? &amp;&amp;
+      [&lt;preferred-size>]?] | none
+
+    <tr>
+     <th>Initial:
+
+     <td>none
+
+    <tr>
+     <th>Applies to:
+
+     <td>flexbox items
+
+    <tr>
+     <th>Inherited:
+
+     <td>no
+
+    <tr>
+     <th>Computed Value:
+
+     <td>specified value
+
+    <tr>
+     <th>Media:
+
+     <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>yes
+  </table>
+
+  <p class=note><b>Editorial note:</b> in a property, default preferred size
+   of zero is problematic. If flex property is not specified, &lsquo;<code
+   class=property>width</code>&rsquo; or &lsquo;<code
+   class=property>height</code>&rsquo; must be used, which corresponds to
+   preferred size of &lsquo;<code class=property>auto</code>&rsquo;. But if
+   flex is specified, we want default preferred size of 0px. The new keyword
+   &lsquo;<a href="#flex-flow-none"><code
+   class=property>none</code></a>&rsquo; is the way around it.
+
+  <p>The &lsquo;<a href="#flex"><code class=property>flex</code></a>&rsquo;
+   property specifiex the parameters of a <dfn id=flexible-length
    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; notation is:
-
-  <pre class=prod><dfn
-   id=ltflex>&lt;flex></dfn> = flex( [ &lt;pos-flex> &lt;neg-flex>? ]? &amp;&amp; &lt;preferred-size>? )</pre>
+   id=preferred-size>preferred size</dfn>.
 
   <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;<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
+   <code>&lt;preferred-size></code> is any value that would be valid in the
+   &lsquo;<code class=property>width</code>&rsquo; or &lsquo;<code
+   class=property>height</code>&rsquo; property. 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,
    or is a syntax error.
 
-  <p>The <code>&lt;pos-flex></code> component sets the length's <a
+  <p>The <code>&lt;pos-flex></code> component sets the <a
    href="#positive-flexibility"><i>positive flexibility</i></a>; if omitted,
    the <a href="#positive-flexibility"><i>positive flexibility</i></a>
    defaults to &lsquo;<code class=css>1</code>&rsquo;. The
-   <code>&lt;neg-flex></code> component sets the length's <a
+   <code>&lt;neg-flex></code> component sets the <a
    href="#negative-flexibility"><i>negative flexibility</i></a>; if omitted,
-   it defaults to &lsquo;<code class=css>0</code>&rsquo;. The
-   <code>&lt;preferred-size></code> component sets the length's <a
+   it defaults to &lsquo;<code class=css>0</code>&rsquo;.
+
+  <p>The <code>&lt;preferred-size></code> component sets the <a
    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; 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>. 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>A &lsquo;<a href="#ltflex"><code class=css>&lt;flex></code></a>&rsquo;
-   value is transitionable, by transitioning the <a
+   to &lsquo;<code class=css>0px</code>&rsquo;. If set to &lsquo;<code
+   class=property>auto</code>&rsquo;, the value of &lsquo;<code
+   class=property>width</code>&rsquo; or &lsquo;<code
+   class=property>height</code>&rsquo; (whichever is in parallel to main
+   axis) is used as preferred size.
+
+  <p>The keyword &lsquo;<a href="#flex-flow-none"><code
+   class=property>none</code></a>&rsquo; is equivalent to "0 0 auto".
+
+  <p class=note><b>Reviewers:</b> editors differ in preference for default
+   value of the preferred size. The current choice is default flexibility of
+   "1" and default preferred size of "0px". Earlier spec and two partial
+   implementations use defaults of "0" and "auto". These still have to be
+   defaults when &lsquo;<a href="#flex"><code
+   class=property>flex</code></a>&rsquo; property is not specified. <br>
+   The current defaults are chosen by consensus, but there has not been much
+   external input in support of either option. If you can share an opinion,
+   and/or use cases in support of either set of defaults, the editors would
+   appreciate it.
+
+  <p>A &lsquo;<code class=css>&lt;flex></code>&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. &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.
+   independently. &lsquo;<code class=css>&lt;flex></code>&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>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
@@ -1138,11 +1191,11 @@ <h2 id=flexibility><span class=secno>4. </span> Flexibility: the
    value that represents a percentage of the free space or something?
 
   <div class=example>
-   <p>The &lsquo;<code class=css>flex()</code>&rsquo; notation allows
-    elements to respond directly to the available space, in ways that are
-    difficult or impossible in normal CSS. One common example is a page with
-    one segment intended to stay on screen, and another section which may be
-    long but which shouldn't scroll the page, like a chat room:</p>
+   <p>Flexibility allows elements to respond directly to the available space,
+    in ways that are difficult or impossible in normal CSS. One common
+    example is a page with one segment intended to stay on screen, and
+    another section which may be long but which shouldn't scroll the page,
+    like a chat room:</p>
 
    <pre>
 &lt;!DOCTYPE html>
@@ -1162,12 +1215,18 @@ <h2 id=flexibility><span class=secno>4. </span> Flexibility: the
  &lt;/body>
  &lt;style>
  body { display:flexbox; flex-flow: column; }
- #messages { height: flex(1); }
+ #messages { flex:1; }
  &lt;/style></pre>
 
    <p class=issue>Illustrate this example.</p>
   </div>
 
+  <p class=issue>Currently there are no separate properties for pos-flex,
+   neg-flex or preferred size. If it doesn't change, there needs to be at
+   least CSS OM access to the separate values. Parsing space-separated list
+   is easier than functional notation, but figuring out the used value for
+   preferred size is still far from trivial.
+
   <h2 id=alignment><span class=secno>5. </span> Alignment</h2>
 
   <p>After a flexbox's contents have finished their flexing, they can be
@@ -1484,6 +1543,33 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
      <a href="#cross-start"><i>cross-start</i></a> edge of the line.</p>
   </dl>
 
+  <div class=issue>
+   <p>Finalize and define what happens to auto margin.
+
+   <p>Proposals:
+
+   <ul>
+    <li>cross-axis margins (align):
+     <ol>
+      <li>&lsquo;<code class=property>auto</code>&rsquo; is zero
+
+      <li>auto margins applied before alignment, map directly to alignment
+       values (start/end/center)
+
+      <li>auto margins applied before alignment, do safe align (flex-align
+       does &lsquo;<code class=css>true center</code>&rsquo; etc.)
+     </ol>
+
+    <li>main-axis margins (pack):
+     <ol>
+      <li>&lsquo;<code class=property>auto</code>&rsquo; is zero
+
+      <li>if there is positive extra space after flexing (and before pack),
+       distribute it equally to auto margins.
+     </ol>
+   </ul>
+  </div>
+
   <div class=figure> <img height=377 src="images/flex-align.svg" width=508>
    <p class=caption>An illustration of the five &lsquo;<a
     href="#flex-align0"><code class=property>flex-align</code></a>&rsquo;
@@ -1566,7 +1652,7 @@ <h2 id=multi-line><span class=secno>6. </span> Multi-line Flexbox</h2>
 	width: 300px;
 }
 button {
-	width: flex(80px 1);
+	flex:80px 1;
 }
 &lt;style>
 
@@ -1612,7 +1698,7 @@ <h2 id=multi-line><span class=secno>6. </span> Multi-line Flexbox</h2>
 	width: 300px;
 }
 button {
-	width: flex(80px 1);
+	flex:80px 1;
 	max-width: 90px;
 }</pre>
 
@@ -2584,6 +2670,22 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>flexbox | inline-flexbox
 
+    <tr>
+     <th><a class=property href="#flex">flex</a>
+
+     <td>[[ &lt;pos-flex> &lt;neg-flex>? ]? &amp;&amp;
+      [&lt;preferred-size>]?] | none
+
+     <td>none
+
+     <td>flexbox items
+
+     <td>no
+
+     <td>specified value
+
+     <td>visual
+
     <tr>
      <th><a class=property href="#flex-align0">flex-align</a>
 
@@ -2774,8 +2876,7 @@ <h2 class=no-num id=index>Index</h2>
    <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.</strong></a>
-    
+   <li>flex, <a href="#flex" title=flex><strong>4.</strong></a>
 
    <li>flex-align, <a href="#flex-align0"
     title=flex-align><strong>5.2.</strong></a>