[css-gaps-1] Clarify flexbox behavior with examples

Author: kbabbitt

css-gaps-1/Overview.bs

@@ -151,6 +151,19 @@ Layout and painting {#layout-painting}
 		</figcaption>
 	</div>
 
+	Note: [[CSS-ALIGN-3#column-row-gap]] defines
+	cross-direction gaps in flex containers
+	as being between adacent flex items in a single line.
+	Thus, in the example above,
+	even though the right edges of #4 and #7 line up,
+	and the left edges of #5 and #8 line up,
+	the spaces between those two pairs of items are <em>two distinct gaps</em>
+	since they are on different lines.
+	Therefore, the intersection between #4, #5, #7, and #8
+	contains two <a>gap intersection points</a> whose locations coincide:
+	one at the bottom of the gap between #4 and #5,
+	and one at the top of the gap between #7 and #8.
+
 	<a>Gap decorations</a> are painted relative to pairs of <a>gap intersection points</a>,
 	in the center of the corresponding gap and parallel to its edges.
 
@@ -305,42 +318,103 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
 
 	<div class="example">
 		<pre>
-			.break-intersection {
-				rule-break: intersection;
+			.break-none-grid {
+				display: grid;
+				grid-template: repeat(4, 100px) / repeat(4, 100px);
+				gap: 20px;
+				row-rule: 6px solid red;
+				column-rule: 6px solid blue;
+				rule-break: none;
 				rule-outset: 0px;
 			}
 		</pre>
-		<img src="images/example-break-intersection.png">
+		<img src="images/example-break-none-grid.png">
 		<figcaption>
-			<a>Gap decorations</a> broken at every <a>gap intersection point</a>.
+			Grid <a>gap decorations</a> with no breaks.
+			Note that the <a>gap decorations</a> extend "behind" items placed in the grid.
 		</figcaption>
 	</div>
 
 	<div class="example">
 		<pre>
-			.break-spanning-item {
+			.break-spanning-item-grid {
+				display: grid;
+				grid-template: repeat(4, 100px) / repeat(4, 100px);
+				gap: 20px;
+				row-rule: 6px solid red;
+				column-rule: 6px solid blue;
 				rule-break: spanning-item;
 				rule-outset: 0px;
 			}
 		</pre>
-		<img src="images/example-break-spanning-item.png">
+		<img src="images/example-break-spanning-item-grid.png">
 		<figcaption>
-			<a>Gap decorations</a> broken at <a>gap intersection points</a>
-			that are not adjacent to a spanning item.
+			Grid <a>gap decorations</a> broken at <a>gap intersection points</a>
+			that are not adjacent to spanning items.
 		</figcaption>
 	</div>
 
 	<div class="example">
 		<pre>
-			.break-none {
+			.break-intersection-grid {
+				display: grid;
+				grid-template: repeat(4, 100px) / repeat(4, 100px);
+				gap: 20px;
+				row-rule: 6px solid red;
+				column-rule: 6px solid blue;
+				rule-break: intersection;
+				rule-outset: 0px;
+			}
+		</pre>
+		<img src="images/example-break-intersection-grid.png">
+		<figcaption>
+			Grid <a>gap decorations</a> broken at every <a>gap intersection point</a>
+			that is not flanked by spanning items on opposing sides.
+		</figcaption>
+	</div>
+
+	<div class="example">
+		<pre>
+			.break-none-flex {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 20px;
+				row-rule: 6px solid red;
+				column-rule: 6px solid blue;
 				rule-break: none;
 				rule-outset: 0px;
 			}
 		</pre>
-		<img src="images/example-break-none.png">
+		<img src="images/example-break-none-flex.png">
 		<figcaption>
-			<a>Gap decorations</a> with no breaks.
-			Note that the <a>gap decorations</a> extend "behind" items placed in the grid.
+			Flexbox <a>gap decorations</a> with no breaks.
+			Note that each flex line has its own distinct gaps.
+			Therefore, <a>gap decorations</a> in adjacent flex lines
+			are separate from each other even if the gaps happen to line up.
+		</figcaption>
+	</div>
+
+	Note: Because flexbox has no concept of spanning items,
+	''column-rule-break/spanning-item'' on a flexbox has the same effect as
+	''column-rule-break/none''.
+
+	<div class="example">
+		<pre>
+			.break-intersection-flex {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 20px;
+				width: 500px;
+				gap: 20px;
+				row-rule: 6px solid red;
+				column-rule: 6px solid blue;
+				rule-break: intersection;
+				rule-outset: 0px;
+			}
+		</pre>
+		<img src="images/example-break-intersection-flex.png">
+		<figcaption>
+			Flexbox <a>gap decorations</a> broken at every <a>gap intersection point</a>.
 		</figcaption>
 	</div>