[css-flexbox] Make flex-wrap easier to read.

Author: fantasai

css-flexbox/Overview.bs

@@ -1056,30 +1056,25 @@ Flex Line Wrapping: the 'flex-wrap' property</h3>
 		<dt><dfn>nowrap</dfn>
 		<dd>
 			The flex container is <a>single-line</a>.
-			The <a>cross-start</a> direction is equivalent to either
-			the <a>inline-start</a>
-			or <a>block-start</a>
-			direction of the current <a>writing mode</a>,
-			whichever is in the <a>cross axis</a>,
-			and the <a>cross-end</a> direction is the opposite direction of <a>cross-start</a>.
-
 
 		<dt><dfn>wrap</dfn>
 		<dd>
 			The flex container is <a>multi-line</a>.
-			The <a>cross-start</a> direction is equivalent to either
-			the <a>inline-start</a>
-			or <a>block-start</a>
-			direction of the current <a>writing mode</a>,
-			whichever is in the <a>cross axis</a>,
-			and the <a>cross-end</a> direction is the opposite direction of <a>cross-start</a>.
 
 		<dt><dfn>wrap-reverse</dfn>
 		<dd>
-			Same as ''wrap'',
-			except the <a>cross-start</a> and <a>cross-end</a> directions are swapped.
+			Same as ''wrap''.
 	</dl>
 
+	For the values that are not ''wrap-reverse'',
+	the <a>cross-start</a> direction is equivalent to either
+	the <a>inline-start</a> or <a>block-start</a> direction of the current <a>writing mode</a>
+	(whichever is in the <a>cross axis</a>)
+	and the <a>cross-end</a> direction is the opposite direction of <a>cross-start</a>.
+	When 'flex-wrap' is ''wrap-reverse'',
+	the <a>cross-start</a> and <a>cross-end</a> directions
+	are swapped.
+
 <!--
 ████████ ██       ████████ ██     ██         ████████ ██        ███████  ██      ██
 ██       ██       ██        ██   ██          ██       ██       ██     ██ ██  ██  ██

css-flexbox/Overview.html

@@ -1806,36 +1806,32 @@ <h3 class="heading settled" data-level="5.2" id="flex-wrap-property"><span class
 
     <dd>
 			The flex container is <a data-link-type="dfn" href="#single_line">single-line</a>.
-			The <a data-link-type="dfn" href="#cross_start">cross-start</a> direction is equivalent to either
-			the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline_start">inline-start</a>
-			or <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block_start">block-start</a>
-			direction of the current <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#writing-mode">writing mode</a>,
-			whichever is in the <a data-link-type="dfn" href="#cross-axis">cross axis</a>,
-			and the <a data-link-type="dfn" href="#cross_end">cross-end</a> direction is the opposite direction of <a data-link-type="dfn" href="#cross_start">cross-start</a>.
-
 
 
     <dt><dfn class="css" data-dfn-for="flex-wrap" data-dfn-type="value" data-export="" id="valdef-flex-wrap-wrap">wrap<a class="self-link" href="#valdef-flex-wrap-wrap"></a></dfn>
 
     <dd>
 			The flex container is <a data-link-type="dfn" href="#multi_line">multi-line</a>.
-			The <a data-link-type="dfn" href="#cross_start">cross-start</a> direction is equivalent to either
-			the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline_start">inline-start</a>
-			or <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block_start">block-start</a>
-			direction of the current <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#writing-mode">writing mode</a>,
-			whichever is in the <a data-link-type="dfn" href="#cross-axis">cross axis</a>,
-			and the <a data-link-type="dfn" href="#cross_end">cross-end</a> direction is the opposite direction of <a data-link-type="dfn" href="#cross_start">cross-start</a>.
 
 
     <dt><dfn class="css" data-dfn-for="flex-wrap" data-dfn-type="value" data-export="" id="valdef-flex-wrap-wrap-reverse">wrap-reverse<a class="self-link" href="#valdef-flex-wrap-wrap-reverse"></a></dfn>
 
     <dd>
-			Same as <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap">wrap</a>,
-			except the <a data-link-type="dfn" href="#cross_start">cross-start</a> and <a data-link-type="dfn" href="#cross_end">cross-end</a> directions are swapped.
+			Same as <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap">wrap</a>.
 
    </dl>
 
 
+   <p>For the values that are not <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse">wrap-reverse</a>,
+	the <a data-link-type="dfn" href="#cross_start">cross-start</a> direction is equivalent to either
+	the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#inline_start">inline-start</a> or <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block_start">block-start</a> direction of the current <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#writing-mode">writing mode</a>
+	(whichever is in the <a data-link-type="dfn" href="#cross-axis">cross axis</a>)
+	and the <a data-link-type="dfn" href="#cross_end">cross-end</a> direction is the opposite direction of <a data-link-type="dfn" href="#cross_start">cross-start</a>.
+	When <a class="property" data-link-type="propdesc" href="#propdef-flex-wrap">flex-wrap</a> is <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse">wrap-reverse</a>,
+	the <a data-link-type="dfn" href="#cross_start">cross-start</a> and <a data-link-type="dfn" href="#cross_end">cross-end</a> directions
+	are swapped.</p>
+
+
 
 
    <h3 class="heading settled" data-level="5.3" id="flex-flow-property"><span class="secno">5.3. </span><span class="content">