[css-writing-modes] Move figures. Update flexbox cross-reference. Editorial.

Author: fantasai

css-writing-modes-3/Overview.bs

@@ -1513,10 +1513,20 @@ Abstract Box Terminology</h2>
     are identical in both flow-relative and line-relative terms, so there
     is only one set of these terms.
 
+  <figure id="abstract-ltr-tb">
+    <img src="diagrams/sizing-ltr-tb.svg">
+    <figcaption>Physical & flow-relative terms as applicable to typical English text layout</figcaption>
+  </figure>
+  <figure id="abstract-ttb-rl">
+    <img src="diagrams/sizing-ttb-rl.svg">
+    <figcaption>Physical & flow-relative terms as applicable to vertical Chinese text layout</figcaption>
+  </figure>
+
   <p class="note">
-    Note: [[CSS3-FLEXBOX]] also defines <a href="https://www.w3.org/TR/css3-flexbox/#box-model">flex-relative terms</a>,
+    Note: [[CSS-FLEXBOX-1]] also defines <a href="https://www.w3.org/TR/css-flexbox/#box-model">flex-relative terms</a>,
     which are used in describing flex layout.
 
+
 <h3 id="abstract-axes">
 Abstract Dimensions</h3>
 
@@ -1583,15 +1593,6 @@ Flow-relative Directions</h3>
     are used in place of <a>block-start</a>/<a>inline-start</a>
     and <a>block-end</a>/<a>inline-end</a>, respectively.
 
-  <figure>
-    <img src="diagrams/sizing-ltr-tb.svg">
-    <figcaption>Physical/logical terms as applicable to typical English text layout</figcaption>
-  </figure>
-  <figure>
-    <img src="diagrams/sizing-ttb-rl.svg">
-    <figcaption>Physical/logical terms as applicable to vertical Chinese text layout</figcaption>
-  </figure>
-
   <p class="note">Note that while determining the <a>block-start</a> and
     <a>block-end</a> sides of a box depends only on the 'writing-mode' property,
     determining the <a>inline-start</a> and <a>inline-end</a> sides of a box depends

css-writing-modes-4/Overview.bs

@@ -1585,8 +1585,17 @@ Abstract Box Terminology</h2>
     are identical in both flow-relative and line-relative terms, so there
     is only one set of these terms.
 
+  <figure id="abstract-ltr-tb">
+    <img src="diagrams/sizing-ltr-tb.svg">
+    <figcaption>Physical & flow-relative terms as applicable to typical English text layout</figcaption>
+  </figure>
+  <figure id="abstract-ttb-rl">
+    <img src="diagrams/sizing-ttb-rl.svg">
+    <figcaption>Physical & flow-relative terms as applicable to vertical Chinese text layout</figcaption>
+  </figure>
+
   <p class="note">
-    Note: [[CSS3-FLEXBOX]] also defines <a href="https://www.w3.org/TR/css3-flexbox/#box-model">flex-relative terms</a>,
+    Note: [[CSS-FLEXBOX-1]] also defines <a href="https://www.w3.org/TR/css-flexbox/#box-model">flex-relative terms</a>,
     which are used in describing flex layout.
 
 <h3 id="abstract-axes">
@@ -1655,15 +1664,6 @@ Flow-relative Directions</h3>
     are used in place of <a>block-start</a>/<a>inline-start</a>
     and <a>block-end</a>/<a>inline-end</a>, respectively.
 
-  <figure>
-    <img src="diagrams/sizing-ltr-tb.svg">
-    <figcaption>Physical/logical terms as applicable to typical English text layout</figcaption>
-  </figure>
-  <figure>
-    <img src="diagrams/sizing-ttb-rl.svg">
-    <figcaption>Physical/logical terms as applicable to vertical Chinese text layout</figcaption>
-  </figure>
-
   <p class="note">Note that while determining the <a>block-start</a> and
     <a>block-end</a> sides of a box depends only on the 'writing-mode' property,
     determining the <a>inline-start</a> and <a>inline-end</a> sides of a box depends