Fix gap direction for column flex containers

Per CSS Box Alignment §8, row-gap applies between rows and column-gap
between columns. In a column flex container, the main axis is vertical
so row-gap should be used for main-axis spacing and column-gap for
cross-axis spacing. Previously the code always used column-gap for
main-axis and row-gap for cross-axis regardless of direction.

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

crates/layout/src/lib.rs

···
     let justify_content = parent.justify_content;
     let align_items = parent.align_items;
     let align_content = parent.align_content;
-    let row_gap = parent.row_gap;
-    let column_gap = parent.column_gap;
-
     let container_main_size = match flex_direction {
         FlexDirection::Row | FlexDirection::RowReverse => parent.rect.width,
         FlexDirection::Column | FlexDirection::ColumnReverse => {
···
         flex_direction,
         FlexDirection::RowReverse | FlexDirection::ColumnReverse
     );
+
+    // Per CSS Box Alignment §8, row-gap applies between rows and column-gap
+    // between columns.  In a row flex container the main axis is horizontal
+    // (column-gap between items, row-gap between lines).  In a column flex
+    // container the axes are swapped.
+    let (main_gap, cross_gap) = if is_row {
+        (parent.column_gap, parent.row_gap)
+    } else {
+        (parent.row_gap, parent.column_gap)
+    };
 
     if parent.children.is_empty() {
         parent.rect.height = 0.0;
···
             let gap = if current_line.is_empty() {
                 0.0
             } else {
-                column_gap
+                main_gap
             };
 
             if !current_line.is_empty() && line_main_size + gap + item_outer > container_main_size {
···
             }
 
             if !current_line.is_empty() {
-                line_main_size += column_gap;
+                line_main_size += main_gap;
             }
             line_main_size += item_outer;
             current_line.push(i);
···
     for line in &lines {
         // Total hypothetical main sizes + gaps.
         let total_gaps = if line.len() > 1 {
-            (line.len() - 1) as f32 * column_gap
+            (line.len() - 1) as f32 * main_gap
         } else {
             0.0
         };
···
 
     // Step 6: Position items on main and cross axes.
     let total_cross_gaps = if lines.len() > 1 {
-        (lines.len() - 1) as f32 * row_gap
+        (lines.len() - 1) as f32 * cross_gap
     } else {
         0.0
     };
···
 
         // Main-axis justification.
         let total_main_gaps = if line.len() > 1 {
-            (line.len() - 1) as f32 * column_gap
+            (line.len() - 1) as f32 * main_gap
         } else {
             0.0
         };
···
             // Add gap between items (not after last).
             if item_pos < line_items.len() - 1 {
                 if is_reverse {
-                    main_cursor -= column_gap;
+                    main_cursor -= main_gap;
                 } else {
-                    main_cursor += column_gap;
+                    main_cursor += main_gap;
                 }
             }
 
···
             }
         }
 
-        cross_cursor += line_cross + row_gap + ac_between_offset;
+        cross_cursor += line_cross + cross_gap + ac_between_offset;
     }
 
     // Set parent height based on children.
···
                     .map(|&i| items[i].target_main + items[i].outer_main)
                     .sum();
                 let gaps = if line.len() > 1 {
-                    (line.len() - 1) as f32 * column_gap
+                    (line.len() - 1) as f32 * main_gap
                 } else {
                     0.0
                 };