Clarify the cross-sizing of a flexbox with one line. Editorial tweaking of the 'flex lines' chapter.

Author: tabatkins

css3-flexbox/Overview.html

@@ -233,8 +233,7 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
       property</a>
     </ul>
 
-   <li><a href="#multi-line"><span class=secno>6. </span> Multi-line Flex
-    Containers</a>
+   <li><a href="#flex-lines"><span class=secno>6. </span> Flex Lines</a>
 
    <li><a href="#flexibility"><span class=secno>7. </span> Flexibility</a>
     <ul class=toc>
@@ -368,9 +367,9 @@ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
    right, down, or even up!), can have their order swapped around dynamically
    (i.e., display order is independent of source order), and can "flex" their
    sizes and positions to respond to the available space. If a flex container
-   is <a href="#multi-line0"><i>multi-line</i></a>, the flex items flow in
-   two dimensions, wrapping into separate lines in a fashion similar to how
-   text is wrapped into multiple lines.
+   is <a href="#multi-line"><i>multi-line</i></a>, the flex items flow in two
+   dimensions, wrapping into separate lines in a fashion similar to how text
+   is wrapped into multiple lines.
 
   <div class=example>
    <p>For example, the following HTML snippet uses a flex container to create
@@ -488,7 +487,7 @@ <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model</h2>
    href="#flex-item"><i>flex items</i></a> can either "stretch" to fill the
    available space or be aligned within the space with the ‘<a
    href="#flex-align"><code class=property>flex-align</code></a>’ property.
-   If a flex container is <a href="#multi-line0"><i>multi-line</i></a>, new
+   If a flex container is <a href="#multi-line"><i>multi-line</i></a>, new
    lines are added in the <a href="#cross-end"><i>cross-end</i></a>
    direction, and can similarly be aligned, centered, or distributed within
    the flex container with the ‘<a href="#flex-line-pack"><code
@@ -735,7 +734,7 @@ <h3 id=visibility-collapse><span class=secno>4.2. </span> Effects of
    that helps keep the flex container's layout stable. If a flex container
    has only one line (whether it's <a
    href="#single-line"><i>single-line</i></a> or <a
-   href="#multi-line0"><i>multi-line</i></a>), dynamically collapsing or
+   href="#multi-line"><i>multi-line</i></a>), dynamically collapsing or
    uncollapsing items is guaranteed to have no effect on the flex container's
    <a href="#cross-size"><i>cross size</i></a>, so it won't cause the rest of
    your page's layout to "wobble". (A flex container with multiple lines may
@@ -987,7 +986,7 @@ <h3 id=flex-wrap-property><span class=secno>5.2. </span> Flex Line
   <p> The ‘<a href="#flex-wrap"><code
    class=property>flex-wrap</code></a>’ property controls whether the flex
    container is <a href="#single-line"><i>single-line</i></a> or <a
-   href="#multi-line0"><i>multi-line</i></a>, and the direction of the
+   href="#multi-line"><i>multi-line</i></a>, and the direction of the
    <i>cross-axis</i>, which determines the direction new lines are stacked
    in.
 
@@ -1008,7 +1007,7 @@ <h3 id=flex-wrap-property><span class=secno>5.2. </span> Flex Line
 
    <dt><dfn id=flex-flow-wrap>‘<code class=css>wrap</code>’</dfn>
 
-   <dd> The flex container is <a href="#multi-line0"><i>multi-line</i></a>.
+   <dd> The flex container is <a href="#multi-line"><i>multi-line</i></a>.
     The <a href="#cross-start"><i>cross-start</i></a> direction is equivalent
     to either the <a
     href="http://www.w3.org/TR/css3-writing-modes/#start">start</a> or <a
@@ -1274,39 +1273,50 @@ <h3 id=flex-order-property><span class=secno>5.4. </span> Display Order:
     intelligent wrapping left as an exercise for the reader.)</small>
   </div>
 
-  <h2 id=multi-line><span class=secno>6. </span> Multi-line Flex Containers</h2>
+  <h2 id=flex-lines><span class=secno>6. </span> Flex Lines</h2>
 
   <p> A flex container can be either <a
    href="#single-line"><i>single-line</i></a> or <a
-   href="#multi-line0"><i>multi-line</i></a>, depending on the ‘<a
-   href="#flex-wrap"><code class=property>flex-wrap</code></a>’ property. A
-   <dfn id=single-line>single-line</dfn> flex container lays out all of its
-   children in a single line, even if that would cause its contents to
-   overflow. A <dfn id=multi-line0>multi-line</dfn> flex container breaks its
-   <a href="#flex-item"><i>flex items</i></a> across multiple lines to avoid
-   overflowing, similar to how text is broken onto a new line when it gets
-   too wide to fit on the existing line. Every line contains at least one <a
-   href="#flex-item"><i>flex item</i></a>, unless the flex container itself
-   is completely empty.
-
-  <p> When additional lines are created, they are stacked in the flex
-   container along the <a href="#cross-axis"><i>cross axis</i></a>. Once
-   content is broken into lines, each line is laid out independently;
+   href="#multi-line"><i>multi-line</i></a>, depending on the ‘<a
+   href="#flex-wrap"><code class=property>flex-wrap</code></a>’ property:
+
+  <ul>
+   <li> A <dfn id=single-line>single-line</dfn> flex container lays out all
+    of its children in a single line, even if that would cause its contents
+    to overflow.
+
+   <li> A <dfn id=multi-line>multi-line</dfn> flex container breaks its <a
+    href="#flex-item"><i>flex items</i></a> across multiple lines to avoid
+    overflowing, similar to how text is broken onto a new line when it gets
+    too wide to fit on the existing line. When additional lines are created,
+    they are stacked in the flex container along the <a
+    href="#cross-axis"><i>cross axis</i></a> according to the ‘<a
+    href="#flex-wrap"><code class=property>flex-wrap</code></a>’ property.
+    Every line contains at least one <a href="#flex-item"><i>flex
+    item</i></a>, unless the flex container itself is completely empty.
+  </ul>
+
+  <p> Once content is broken into lines, each line is laid out independently;
    flexible lengths and the ‘<a href="#flex-pack"><code
    class=property>flex-pack</code></a>’ and ‘<a
    href="#flex-item-align"><code class=property>flex-item-align</code></a>’
    properties only consider the items on a single line at a time.
 
-  <p> The <a href="#main-size"><i>main size</i></a> of a line is the same as
-   the <a href="#main-size"><i>main size</i></a> of the flex container's
-   content box. the <a href="#cross-size"><i>cross size</i></a> of a line is
-   the minimum size necessary to contain the <a href="#flex-item"><i>flex
-   items</i></a> on the line, after aligment due to ‘<a
-   href="#flex-item-align"><code
-   class=property>flex-item-align</code></a>’. The lines themselves are
-   then aligned within the flex container with the ‘<a
-   href="#flex-line-pack"><code class=property>flex-line-pack</code></a>’
-   property.
+  <p> When a flex container has multiple lines, the <a
+   href="#cross-size"><i>cross size</i></a> of each line is the minimum size
+   necessary to contain the <a href="#flex-item"><i>flex items</i></a> on the
+   line (after aligment due to ‘<a href="#flex-item-align"><code
+   class=property>flex-item-align</code></a>’), and the lines are aligned
+   within the flex container with the ‘<a href="#flex-line-pack"><code
+   class=property>flex-line-pack</code></a>’ property. When a flex
+   container (even a <a href="#multi-line"><i>multi-line</i></a> one) has
+   only one line, the <a href="#cross-size"><i>cross size</i></a> of the line
+   is the <a href="#cross-size"><i>cross size</i></a> of the flex container,
+   and ‘<a href="#flex-line-pack"><code
+   class=property>flex-line-pack</code></a>’ has no effect. The <a
+   href="#main-size"><i>main size</i></a> of a line is always the same as the
+   <a href="#main-size"><i>main size</i></a> of the flex container's content
+   box.
 
   <div class=example>
    <p> This example shows four buttons that do not fit horizontally.
@@ -2224,7 +2234,7 @@ <h3 id=flex-line-pack-property><span class=secno>8.4. </span> The ‘<a
     <tr>
      <th>Applies to:
 
-     <td><a href="#multi-line0"><i>multi-line</i></a> flex containers
+     <td><a href="#multi-line"><i>multi-line</i></a> flex containers
 
     <tr>
      <th>Inherited:
@@ -2542,8 +2552,8 @@ <h3 id=cross-sizing><span class=secno>9.4. </span> Cross size determination</h3>
    <li id=algo-cross-line> <strong>Calculate the cross size of each flex
     line.</strong>
     <p> If the flex container has only a single line (even if it's a <a
-     href="#multi-line0"><i>multi-line</i></a> flex container), the cross
-     size of the flex line is the flex container's inner cross size.
+     href="#multi-line"><i>multi-line</i></a> flex container), the cross size
+     of the flex line is the flex container's inner cross size.
 
     <p> Otherwise, for each flex line:
 
@@ -2800,7 +2810,7 @@ <h2 id=pagination><span class=secno>10. </span> Fragmenting Flex Layout</h2>
     page, and some of its flex items don't fit in the remaining space on the
     page, the entire fragment is moved to the next page.
 
-   <li> When a <a href="#multi-line0"><i>multi-line</i></a> colum flex
+   <li> When a <a href="#multi-line"><i>multi-line</i></a> colum flex
     container breaks, each fragment has its own "stack" of flex lines, just
     like each fragment of a multi-column element has its own row of column
     boxes.
@@ -3617,7 +3627,7 @@ <h2 class=no-num id=index>Index</h2>
    <li>min-width/height:auto, <a href="#min-auto"
     title="min-width/height:auto"><strong>4.3.</strong></a>
 
-   <li>multi-line, <a href="#multi-line0"
+   <li>multi-line, <a href="#multi-line"
     title=multi-line><strong>6.</strong></a>
 
    <li>negative flex ratio, <a href="#negative-flex-ratio"

css3-flexbox/Overview.src.html

@@ -790,31 +790,41 @@ <h3 id='flex-order-property'>
 
 
 
-<h2 id='multi-line'>
-Multi-line Flex Containers</h2>
+<h2 id='flex-lines'>
+Flex Lines</h2>
 
 	<p>
 		A flex container can be either <i>single-line</i> or <i>multi-line</i>, 
-		depending on the 'flex-wrap' property.  
-		A <dfn>single-line</dfn> flex container lays out all of its children in a single line, 
-		even if that would cause its contents to overflow.
-		A <dfn>multi-line</dfn> flex container breaks its <i>flex items</i> across multiple lines to avoid overflowing, 
-		similar to how text is broken onto a new line when it gets too wide to fit on the existing line.  
-		Every line contains at least one <i>flex item</i>, 
-		unless the flex container itself is completely empty.
+		depending on the 'flex-wrap' property:
+	<ul> 
+		<li>
+			A <dfn>single-line</dfn> flex container lays out all of its children in a single line, 
+			even if that would cause its contents to overflow.
+
+		<li>
+			A <dfn>multi-line</dfn> flex container breaks its <i>flex items</i> across multiple lines to avoid overflowing, 
+			similar to how text is broken onto a new line when it gets too wide to fit on the existing line.  
+			When additional lines are created, 
+			they are stacked in the flex container along the <i>cross axis</i>
+			according to the 'flex-wrap' property.
+			Every line contains at least one <i>flex item</i>, 
+			unless the flex container itself is completely empty.
+	</ul>
 
 	<p>
-		When additional lines are created, 
-		they are stacked in the flex container along the <i>cross axis</i>.  
 		Once content is broken into lines,
 		each line is laid out independently;
 		flexible lengths and the 'flex-pack' and 'flex-item-align' properties only consider the items on a single line at a time.  
 
 	<p>
-		The <i>main size</i> of a line is the same as the <i>main size</i> of the flex container's content box.  
-		the <i>cross size</i> of a line is the minimum size necessary to contain the <i>flex items</i> on the line, 
-		after aligment due to 'flex-item-align'.  
-		The lines themselves are then aligned within the flex container with the 'flex-line-pack' property.
+		When a flex container has multiple lines, the <i>cross size</i> of each line
+		is the minimum size necessary to contain the <i>flex items</i> on the line
+		(after aligment due to 'flex-item-align'),
+		and the lines are aligned within the flex container with the 'flex-line-pack' property.
+		When a flex container (even a <i>multi-line</i> one) has only one line,
+		the <i>cross size</i> of the line is the <i>cross size</i> of the flex container,
+		and 'flex-line-pack' has no effect.
+		The <i>main size</i> of a line is always the same as the <i>main size</i> of the flex container's content box.  
 
 	<div class=example>
 		<p>