Per ML discussion, split flex-flow into flex-direction and flex-wrap.

Author: tabatkins

css3-flexbox/Overview.html

@@ -157,8 +157,10 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
     and Orientation</a>
     <ul class=toc>
      <li><a href="#flex-flow"><span class=secno>3.1. </span> Flexbox Flow
-      Direction: the &lsquo;<code class=property>flex-flow</code>&rsquo;
-      property</a>
+      Direction: the &lsquo;<code
+      class=property>flex-direction</code>&rsquo;, &lsquo;<code
+      class=property>flex-wrap</code>&rsquo;, and &lsquo;<code
+      class=property>flex-flow</code>&rsquo; properties</a>
 
      <li><a href="#flex-order"><span class=secno>3.2. </span> Display Order:
       the &lsquo;<code class=property>flex-order</code>&rsquo; property</a>
@@ -551,21 +553,23 @@ <h2 id=ordering-orientation><span class=secno>3. </span> Ordering and
    properties.
 
   <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
+   &lsquo;<a href="#flex-direction"><code
+   class=property>flex-direction</code></a>&rsquo;, &lsquo;<a
+   href="#flex-wrap"><code class=property>flex-wrap</code></a>&rsquo;, and
    &lsquo;<a href="#flex-flow0"><code
-   class=property>flex-flow</code></a>&rsquo; property</h3>
+   class=property>flex-flow</code></a>&rsquo; properties</h3>
 
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
 
-     <td><dfn id=flex-flow0>flex-flow</dfn>
+     <td><dfn id=flex-direction>flex-direction</dfn>
 
     <tr>
      <th>Values:
 
-     <td>[ row | row-reverse | column | column-reverse ] [ wrap |
-      wrap-reverse ]?
+     <td>row | row-reverse | column | column-reverse
 
     <tr>
      <th>Initial:
@@ -593,13 +597,96 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
      <td>visual
   </table>
 
-  <p>The &lsquo;<a href="#flex-flow0"><code
-   class=property>flex-flow</code></a>&rsquo; property specifies how <a
-   href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox.
-   The value consists of one or two keywords: the first sets the orientation
-   and direction of the flexbox's <a href="#main-axis"><i>main axis</i></a>,
-   which affects the direction that flexbox items are laid out in, and the
-   meaning of the &lsquo;<a href="#flex-pack0"><code
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=flex-wrap>flex-wrap</dfn>
+
+    <tr>
+     <th>Values:
+
+     <td>no-wrap | wrap | wrap-reverse
+
+    <tr>
+     <th>Initial:
+
+     <td>no-wrap
+
+    <tr>
+     <th>Applies To:
+
+     <td>flexboxes
+
+    <tr>
+     <th>Inherited:
+
+     <td>no
+
+    <tr>
+     <th>Computed Value:
+
+     <td>specified value
+
+    <tr>
+     <th>Media:
+
+     <td>visual
+  </table>
+
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=flex-flow0>flex-flow</dfn>
+
+    <tr>
+     <th>Values:
+
+     <td>&lt;&lsquo;<a href="#flex-direction"><code
+      class=property>flex-direction</code></a>&rsquo;> &lt;&lsquo;<a
+      href="#flex-wrap"><code class=property>flex-wrap</code></a>&rsquo;>?
+
+    <tr>
+     <th>Initial:
+
+     <td>see individual properties
+
+    <tr>
+     <th>Applies To:
+
+     <td>flexboxes
+
+    <tr>
+     <th>Inherited:
+
+     <td>see individual properties
+
+    <tr>
+     <th>Computed Value:
+
+     <td>see individual properties
+
+    <tr>
+     <th>Media:
+
+     <td>visual
+  </table>
+
+  <p>The &lsquo;<a href="#flex-direction"><code
+   class=property>flex-direction</code></a>&rsquo; property specifies how <a
+   href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox,
+   by setting the direction of the flexbox's <a href="#main-axis"><i>main
+   axis</i></a>. This affects the direction that flexbox items are laid out
+   in, and the meaning of the &lsquo;<a href="#flex-pack0"><code
+   class=property>flex-pack</code></a>&rsquo; property.
+
+  <p> The value consists of one or two keywords: the first sets the
+   orientation and direction of the flexbox's <a href="#main-axis"><i>main
+   axis</i></a>, which affects the direction that flexbox items are laid out
+   in, and the meaning of the &lsquo;<a href="#flex-pack0"><code
    class=property>flex-pack</code></a>&rsquo; properties; the second, if
    specified, marks the flexbox as being multiline and sets the direction of
    the <a href="#cross-axis"><i>cross axis</i></a>, which affects the
@@ -639,6 +726,27 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
    <dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
     href="#main-start"><i>main-start</i></a> and <a
     href="#main-end"><i>main-end</i></a> directions are swapped.
+  </dl>
+
+  <p>The &lsquo;<a href="#flex-wrap"><code
+   class=property>flex-wrap</code></a>&rsquo; property controls whether the
+   flexbox is <a href="#single-line"><i>single-line</i></a> or <a
+   href="#multi-line"><i>multi-line</i></a>, and the direction of the <a
+   href="#cross-axis"><i>cross axis</i></a>, which affects the direction new
+   lines are stacked in and the meaning of the &lsquo;<a
+   href="#flex-align0"><code class=property>flex-align</code></a>&rsquo; and
+   &lsquo;<a href="#flex-line-pack0"><code
+   class=property>flex-line-pack</code></a>&rsquo; properties.
+
+  <dl>
+   <dt><dfn id=flex-flow-no-wrap>no-wrap</dfn>
+
+   <dd>The flexbox is <a href="#single-line"><i>single-line</i></a>. The <a
+    href="#cross-start"><i>cross-start</i></a> direction is equivalent to
+    either the "start" or "before" direction of the current writing mode,
+    whichever is in the <i>cross-axis</i>, and the <a
+    href="#cross-end"><i>cross-end</i></a> direction is the opposite
+    direction of <a href="#cross-start"><i>cross-start</i></a>.
 
    <dt><dfn id=flex-flow-wrap>wrap</dfn>
 
@@ -656,12 +764,12 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
     href="#cross-end"><i>cross-end</i></a> directions are swapped.
   </dl>
 
-  <p>If the second keyword is omitted, the flexbox is <a
-   href="#single-line"><i>single-line</i></a>, and the <a
-   href="#cross-start"><i>cross-start</i></a> and <a
-   href="#cross-end"><i>cross-end</i></a> directions are set as described
-   above for the &lsquo;<a href="#flex-flow-wrap"><code
-   class=css>wrap</code></a>&rsquo; keyword.
+  <p>The &lsquo;<a href="#flex-flow0"><code
+   class=property>flex-flow</code></a>&rsquo; property is a shorthand for
+   setting the &lsquo;<a href="#flex-direction"><code
+   class=property>flex-direction</code></a>&rsquo; and &lsquo;<a
+   href="#flex-wrap"><code class=property>flex-wrap</code></a>&rsquo;
+   properties together.
 
   <div class=example>
    <p>Some examples of valid flows:</p>
@@ -678,7 +786,7 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
   </div>
 
   <p class=issue>Is there a good, shorter way to refer to the reversed
-   physical directions than the 8-character "-reverse" suffix?
+   directions than the 8-character "-reverse" suffix?
 
   <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
    &lsquo;<a href="#flex-order0"><code
@@ -1689,10 +1797,9 @@ <h2 class=no-num id=property>Property index</h2>
      <td>visual
 
     <tr>
-     <th><a class=property href="#flex-flow0">flex-flow</a>
+     <th><a class=property href="#flex-direction">flex-direction</a>
 
-     <td>[ row | row-reverse | column | column-reverse ] [ wrap |
-      wrap-reverse ]?
+     <td>row | row-reverse | column | column-reverse
 
      <td>row
 
@@ -1704,6 +1811,21 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>visual
 
+    <tr>
+     <th><a class=property href="#flex-flow0">flex-flow</a>
+
+     <td>&lt;&lsquo;flex-direction&rsquo;> &lt;&lsquo;flex-wrap&rsquo;>?
+
+     <td>see individual properties
+
+     <td>flexboxes
+
+     <td>see individual properties
+
+     <td>see individual properties
+
+     <td>visual
+
     <tr>
      <th><a class=property href="#flex-line-pack0">flex-line-pack</a>
 
@@ -1747,6 +1869,21 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>specified value
 
+     <td>visual
+
+    <tr>
+     <th><a class=property href="#flex-wrap">flex-wrap</a>
+
+     <td>no-wrap | wrap | wrap-reverse
+
+     <td>no-wrap
+
+     <td>flexboxes
+
+     <td>no
+
+     <td>specified value
+
      <td>visual
   </table>
   <!--end-properties-->
@@ -1805,6 +1942,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>flexbox item's, <a href="#flexbox-item"
     title="flexbox item's"><strong>2.</strong></a>
 
+   <li>flex-direction, <a href="#flex-direction"
+    title=flex-direction><strong>3.1.</strong></a>
+
    <li>flex-flow, <a href="#flex-flow0"
     title=flex-flow><strong>3.1.</strong></a>
 
@@ -1828,6 +1968,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>flex-pack, <a href="#flex-pack0"
     title=flex-pack><strong>5.1.</strong></a>
 
+   <li>flex-wrap, <a href="#flex-wrap"
+    title=flex-wrap><strong>3.1.</strong></a>
+
    <li>hypothetical neighbors, <a href="#hypothetical-neighbors"
     title="hypothetical neighbors"><strong>2.2.1.</strong></a>
 
@@ -1855,6 +1998,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>negative flexibility, <a href="#negative-flexibility"
     title="negative flexibility"><strong>4.1.</strong></a>
 
+   <li>no-wrap, <a href="#flex-flow-no-wrap"
+    title=no-wrap><strong>3.1.</strong></a>
+
    <li>positive flexibility, <a href="#positive-flexibility"
     title="positive flexibility"><strong>4.1.</strong></a>