Update HtmlFlex implementation

packages/core/lib/src/core_widget_factory.dart

@@ -229,6 +229,7 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
     CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
     required Axis direction,
     MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
+    double spacing = 0.0,
     TextBaseline textBaseline = TextBaseline.alphabetic,
     TextDirection textDirection = TextDirection.ltr,
   }) {
@@ -238,6 +239,7 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
           crossAxisAlignment: crossAxisAlignment,
           direction: direction,
           mainAxisAlignment: mainAxisAlignment,
+          spacing: spacing,
           textBaseline: textBaseline,
           textDirection: textDirection,
           children: children,

packages/core/lib/src/internal/ops/style_display_flex.dart

@@ -1,21 +1,25 @@
 part of '../core_ops.dart';
 
+const kCssAlignItems = 'align-items';
+const kCssAlignItemsFlexStart = 'flex-start';
+const kCssAlignItemsFlexEnd = 'flex-end';
+const kCssAlignItemsCenter = 'center';
+const kCssAlignItemsBaseline = 'baseline';
+const kCssAlignItemsStretch = 'stretch';
+
 const kCssFlexDirection = 'flex-direction';
 const kCssFlexDirectionColumn = 'column';
 const kCssFlexDirectionRow = 'row';
+
+const kCssGap = 'gap';
+
 const kCssJustifyContent = 'justify-content';
 const kCssJustifyContentFlexStart = 'flex-start';
 const kCssJustifyContentFlexEnd = 'flex-end';
 const kCssJustifyContentCenter = 'center';
 const kCssJustifyContentSpaceBetween = 'space-between';
 const kCssJustifyContentSpaceAround = 'space-around';
 const kCssJustifyContentSpaceEvenly = 'space-evenly';
-const kCssAlignItems = 'align-items';
-const kCssAlignItemsFlexStart = 'flex-start';
-const kCssAlignItemsFlexEnd = 'flex-end';
-const kCssAlignItemsCenter = 'center';
-const kCssAlignItemsBaseline = 'baseline';
-const kCssAlignItemsStretch = 'stretch';
 
 class StyleDisplayFlex {
   final WidgetFactory wf;
@@ -30,21 +34,24 @@ class StyleDisplayFlex {
           return null;
         }
 
+        String alignItems = kCssAlignItemsFlexStart;
         String flexDirection = kCssFlexDirectionRow;
+        CssLength? gap;
         String justifyContent = kCssJustifyContentFlexStart;
-        String alignItems = kCssAlignItemsFlexStart;
 
         for (final element in tree.element.styles) {
           final String? value = element.term;
 
           if (value != null) {
             switch (element.property) {
+              case kCssAlignItems:
+                alignItems = value;
               case kCssFlexDirection:
                 flexDirection = value;
+              case kCssGap:
+                gap = tryParseCssLength(element.value);
               case kCssJustifyContent:
                 justifyContent = value;
-              case kCssAlignItems:
-                alignItems = value;
             }
           }
         }
@@ -65,6 +72,7 @@ class StyleDisplayFlex {
                   ? Axis.horizontal
                   : Axis.vertical,
               mainAxisAlignment: _toMainAxisAlignment(justifyContent),
+              spacing: gap?.getValue(resolved) ?? 0.0,
               textDirection: resolved.directionOrLtr,
             );
           },