Added pictures to the flex-flow example.

Author: tabatkins

css3-flexbox/Overview.html

@@ -848,15 +848,42 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
   <div class=example>
    <p>Some examples of valid flows:</p>
 
-   <pre>
-div { flex-flow: row; }                 /* Initial value. Main axis is inline,
-                                           no wrap. */
-div { flex-flow: column wrap; }         /* Main axis is block-direction and lines
-                                           wrap in the inline direction.  For an 
-                                           English page, the main axis is top-to-bottom
-                                           and lines wrap to the right. */
-div { writing-mode: tb-rl;              /* Main axis is block direction (right to left).
-      flex-flow: column wrap-reverse; } /* New lines wrap upwards. */</pre>
+   <div class=code-and-figure>
+    <div>
+     <pre>
+div { flex-flow: row; }
+/* Initial value. Main axis is 
+   inline, no wrap. */</pre>
+    </div>
+
+    <div><img height=80 src="images/flex-flow1.svg" width=200></div>
+   </div>
+
+   <div class=code-and-figure>
+    <div>
+     <pre>
+div { flex-flow: column wrap; }
+/* Main axis is block-direction and lines
+   wrap in the inline direction.  For an 
+   English page, the main axis is top-to-bottom
+   and lines wrap to the right. */</pre>
+    </div>
+
+    <div><img height=200 src="images/flex-flow2.svg" width=170></div>
+   </div>
+
+   <div class=code-and-figure>
+    <div>
+     <pre>
+div { writing-mode: tb-rl;
+      flex-flow: column wrap-reverse; }
+/* Main axis is block direction (right to 
+   left). New lines wrap upwards. */
+			</pre>
+    </div>
+
+    <div><img height=170 src="images/flex-flow3.svg" width=200></div>
+   </div>
   </div>
 
   <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the

css3-flexbox/Overview.src.html

@@ -366,15 +366,32 @@ <h3 id='flex-flow'>
 	<div class="example">
 		<p>Some examples of valid flows:</p>
 
-		<pre>
-div { flex-flow: row; }                 /* Initial value. Main axis is inline,
-                                           no wrap. */
-div { flex-flow: column wrap; }         /* Main axis is block-direction and lines
-                                           wrap in the inline direction.  For an 
-                                           English page, the main axis is top-to-bottom
-                                           and lines wrap to the right. */
-div { writing-mode: tb-rl;              /* Main axis is block direction (right to left).
-      flex-flow: column wrap-reverse; } /* New lines wrap upwards. */</pre>
+		<div class='code-and-figure'>
+			<div><pre>
+div { flex-flow: row; }
+/* Initial value. Main axis is 
+   inline, no wrap. */</pre></div>
+			<div><img src='images/flex-flow1.svg' width=200 height=80></div>
+		</div>
+		<div class='code-and-figure'>
+			<div><pre>
+div { flex-flow: column wrap; }
+/* Main axis is block-direction and lines
+   wrap in the inline direction.  For an 
+   English page, the main axis is top-to-bottom
+   and lines wrap to the right. */</pre>
+			</div>
+			<div><img src='images/flex-flow2.svg' width=170 height=200></div>
+		</div>
+		<div class='code-and-figure'>
+			<div><pre>
+div { writing-mode: tb-rl;
+      flex-flow: column wrap-reverse; }
+/* Main axis is block direction (right to 
+   left). New lines wrap upwards. */
+			</div>
+			<div><img src='images/flex-flow3.svg' width=200 height=170></div>
+		</div>
 	</div>