From 32b531229f2fa253f335504ada6942a2ecd4c537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Fri, 8 Sep 2023 10:42:58 +0300
Subject: [PATCH 01/14] Added initial support for Flex components

---
 .../core/lib/src/core_widget_factory.dart     | 87 ++++++++++++++++++-
 1 file changed, 86 insertions(+), 1 deletion(-)

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index fdeb10648..f6ecf0fee 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -681,10 +681,17 @@ class WidgetFactory {
           ..[kCssDisplay] = kCssDisplayBlock
           ..tsb.enqueue(TextStyleOps.fontStyle, FontStyle.italic);
         break;
+      case 'div':
+        final displayExperssion = meta.element.styles.where((element) => element.property == "display").firstOrNull;
+        final display = displayExperssion?.term ?? "block";
+        if (display == "flex") {
+          meta.register(_flexOp(meta));
+        }
 
+        meta[kCssDisplay] = kCssDisplayBlock;
+        break;
       case 'article':
       case 'aside':
-      case 'div':
       case 'figcaption':
       case 'footer':
       case 'header':
@@ -1150,6 +1157,84 @@ class WidgetFactory {
     return baseUrl.resolveUri(uri).toString();
   }
 
+  /// Builds custom widget for flex layout elements from [meta]
+  BuildOp _flexOp(BuildMetadata meta) {
+    return BuildOp(
+      onWidgets: (meta, widgets) {
+        final id = meta.element.id;
+        var flexDirection = "row";
+        var justifyContent = "flex-start";
+        var alignItems = "flex-start";
+
+        for (final element in meta.element.styles) {
+          final value = element.term;
+
+          if (value != null) {
+            switch (element.property) {
+              case "flex-direction":
+                flexDirection = value;
+              break;
+              case "justify-content":
+                justifyContent = value;
+              break;
+              case "align-items":
+                alignItems = value;
+              break;
+            }
+          }
+        }
+
+        return [
+          Flex(
+            key: Key(id),
+            direction: "row" == flexDirection ? Axis.horizontal : Axis.vertical,
+            mainAxisAlignment: _toMainAxisAlignment(justifyContent),
+            crossAxisAlignment: _toCrossAxisAlignment(alignItems),
+            children: widgets.toList()
+          )
+        ];
+      },      
+    );
+  }
+
+  /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment
+  static MainAxisAlignment _toMainAxisAlignment(String justifyContent) {
+    switch (justifyContent) {
+      case "flex-start":
+        return MainAxisAlignment.start;
+      case "flex-end":
+        return MainAxisAlignment.end;
+      case "center":
+        return MainAxisAlignment.center;
+      case "space-between":
+        return MainAxisAlignment.spaceBetween;
+      case "space-around":
+        return MainAxisAlignment.spaceAround;
+      case "space-evenly":
+        return MainAxisAlignment.spaceEvenly;
+      default:
+        return MainAxisAlignment.start;
+    }
+  }
+
+  /// Converts CSS [alignItems] to Flutter Grid CrossAxisAlignment
+  static CrossAxisAlignment _toCrossAxisAlignment(String alignItems) {
+    switch (alignItems) {
+      case "flex-start":
+        return CrossAxisAlignment.start;
+      case "flex-end":
+        return CrossAxisAlignment.end;
+      case "center":
+        return CrossAxisAlignment.center;
+      case "baseline":
+        return CrossAxisAlignment.baseline;
+      case "stretch":
+        return CrossAxisAlignment.stretch;
+      default:
+        return CrossAxisAlignment.start;
+    }
+  }
+
   BuildOp _anchorOp(String id) {
     final anchor = GlobalKey(debugLabel: id);
 

From e33285ae0567b7da8ae8c5a1d0cbf11b356cc302 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Fri, 8 Sep 2023 15:09:36 +0300
Subject: [PATCH 02/14] Review issues

---
 .../core/lib/src/core_widget_factory.dart     | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index f6ecf0fee..5b01a8eaf 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -682,9 +682,10 @@ class WidgetFactory {
           ..tsb.enqueue(TextStyleOps.fontStyle, FontStyle.italic);
         break;
       case 'div':
-        final displayExperssion = meta.element.styles.where((element) => element.property == "display").firstOrNull;
-        final display = displayExperssion?.term ?? "block";
-        if (display == "flex") {
+        final displayExpressions = meta.element.styles.where((element) => element.property == 'display');
+        final displayExpression = displayExpressions.isNotEmpty ? displayExpressions.first : null;
+        final display = displayExpression?.term ?? 'block';
+        if (display == 'flex') {
           meta.register(_flexOp(meta));
         }
 
@@ -1157,27 +1158,27 @@ class WidgetFactory {
     return baseUrl.resolveUri(uri).toString();
   }
 
-  /// Builds custom widget for flex layout elements from [meta]
+  /// Builds custom widget for div elements with display: flex from [meta]
   BuildOp _flexOp(BuildMetadata meta) {
     return BuildOp(
       onWidgets: (meta, widgets) {
-        final id = meta.element.id;
-        var flexDirection = "row";
-        var justifyContent = "flex-start";
-        var alignItems = "flex-start";
+        final String id = meta.element.id;
+        String flexDirection = 'row';
+        String justifyContent = 'flex-start';
+        String alignItems = 'flex-start';
 
         for (final element in meta.element.styles) {
-          final value = element.term;
+          final String? value = element.term;
 
           if (value != null) {
             switch (element.property) {
-              case "flex-direction":
+              case 'flex-direction':
                 flexDirection = value;
               break;
-              case "justify-content":
+              case 'justify-content':
                 justifyContent = value;
               break;
-              case "align-items":
+              case 'align-items':
                 alignItems = value;
               break;
             }
@@ -1187,7 +1188,7 @@ class WidgetFactory {
         return [
           Flex(
             key: Key(id),
-            direction: "row" == flexDirection ? Axis.horizontal : Axis.vertical,
+            direction: 'row' == flexDirection ? Axis.horizontal : Axis.vertical,
             mainAxisAlignment: _toMainAxisAlignment(justifyContent),
             crossAxisAlignment: _toCrossAxisAlignment(alignItems),
             children: widgets.toList()
@@ -1200,17 +1201,17 @@ class WidgetFactory {
   /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment
   static MainAxisAlignment _toMainAxisAlignment(String justifyContent) {
     switch (justifyContent) {
-      case "flex-start":
+      case 'flex-start':
         return MainAxisAlignment.start;
-      case "flex-end":
+      case 'flex-end':
         return MainAxisAlignment.end;
-      case "center":
+      case 'center':
         return MainAxisAlignment.center;
-      case "space-between":
+      case 'space-between':
         return MainAxisAlignment.spaceBetween;
-      case "space-around":
+      case 'space-around':
         return MainAxisAlignment.spaceAround;
-      case "space-evenly":
+      case 'space-evenly':
         return MainAxisAlignment.spaceEvenly;
       default:
         return MainAxisAlignment.start;
@@ -1220,15 +1221,15 @@ class WidgetFactory {
   /// Converts CSS [alignItems] to Flutter Grid CrossAxisAlignment
   static CrossAxisAlignment _toCrossAxisAlignment(String alignItems) {
     switch (alignItems) {
-      case "flex-start":
+      case 'flex-start':
         return CrossAxisAlignment.start;
-      case "flex-end":
+      case 'flex-end':
         return CrossAxisAlignment.end;
-      case "center":
+      case 'center':
         return CrossAxisAlignment.center;
-      case "baseline":
+      case 'baseline':
         return CrossAxisAlignment.baseline;
-      case "stretch":
+      case 'stretch':
         return CrossAxisAlignment.stretch;
       default:
         return CrossAxisAlignment.start;

From b03cb3db6ee665a8f9d0d646e8434793e8bc7227 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Fri, 22 Sep 2023 09:19:57 +0300
Subject: [PATCH 03/14] Changed flex items to use width & height auto by
 defaults

---
 .../core/lib/src/core_widget_factory.dart     | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index 5b01a8eaf..335a9b739 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -1161,6 +1161,9 @@ class WidgetFactory {
   /// Builds custom widget for div elements with display: flex from [meta]
   BuildOp _flexOp(BuildMetadata meta) {
     return BuildOp(
+      onChild: (childMeta) {
+        childMeta.register(_flexItemOp(childMeta));
+      },
       onWidgets: (meta, widgets) {
         final String id = meta.element.id;
         String flexDirection = 'row';
@@ -1198,6 +1201,18 @@ class WidgetFactory {
     );
   }
 
+  /// Build op for child elements of flex containers
+  BuildOp _flexItemOp(BuildMetadata meta) {
+    return BuildOp(
+      defaultStyles: (element) {
+        return {
+          kCssWidth: "auto",
+          kCssHeight: "auto"
+        };
+      }
+    );
+  }
+
   /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment
   static MainAxisAlignment _toMainAxisAlignment(String justifyContent) {
     switch (justifyContent) {
@@ -1240,10 +1255,6 @@ class WidgetFactory {
     final anchor = GlobalKey(debugLabel: id);
 
     return BuildOp(
-      onTree: (meta, tree) {
-        _anchorRegistry.register(id, anchor);
-        tree.registerAnchor(anchor);
-      },
       onTreeFlattening: (meta, tree) {
         final widget = WidgetPlaceholder('#$id').wrapWith(
           (context, _) => SizedBox(

From 4dafcf817ff7173b5e7be3deb675761912d59d82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Wed, 27 Sep 2023 21:02:35 +0300
Subject: [PATCH 04/14] Review changes

---
 .../core/lib/src/core_widget_factory.dart     |  96 +----------------
 packages/core/lib/src/internal/ops/flex.dart  | 102 ++++++++++++++++++
 2 files changed, 104 insertions(+), 94 deletions(-)
 create mode 100644 packages/core/lib/src/internal/ops/flex.dart

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index 335a9b739..130cddd12 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -11,6 +11,7 @@ import 'internal/core_ops.dart';
 import 'internal/core_parser.dart';
 import 'internal/flattener.dart';
 import 'internal/margin_vertical.dart';
+import 'internal/ops/flex.dart';
 import 'internal/platform_specific/fallback.dart'
     if (dart.library.io) 'internal/platform_specific/io.dart';
 
@@ -686,7 +687,7 @@ class WidgetFactory {
         final displayExpression = displayExpressions.isNotEmpty ? displayExpressions.first : null;
         final display = displayExpression?.term ?? 'block';
         if (display == 'flex') {
-          meta.register(_flexOp(meta));
+          meta.register(FlexOps.flexOp(meta));
         }
 
         meta[kCssDisplay] = kCssDisplayBlock;
@@ -1158,99 +1159,6 @@ class WidgetFactory {
     return baseUrl.resolveUri(uri).toString();
   }
 
-  /// Builds custom widget for div elements with display: flex from [meta]
-  BuildOp _flexOp(BuildMetadata meta) {
-    return BuildOp(
-      onChild: (childMeta) {
-        childMeta.register(_flexItemOp(childMeta));
-      },
-      onWidgets: (meta, widgets) {
-        final String id = meta.element.id;
-        String flexDirection = 'row';
-        String justifyContent = 'flex-start';
-        String alignItems = 'flex-start';
-
-        for (final element in meta.element.styles) {
-          final String? value = element.term;
-
-          if (value != null) {
-            switch (element.property) {
-              case 'flex-direction':
-                flexDirection = value;
-              break;
-              case 'justify-content':
-                justifyContent = value;
-              break;
-              case 'align-items':
-                alignItems = value;
-              break;
-            }
-          }
-        }
-
-        return [
-          Flex(
-            key: Key(id),
-            direction: 'row' == flexDirection ? Axis.horizontal : Axis.vertical,
-            mainAxisAlignment: _toMainAxisAlignment(justifyContent),
-            crossAxisAlignment: _toCrossAxisAlignment(alignItems),
-            children: widgets.toList()
-          )
-        ];
-      },      
-    );
-  }
-
-  /// Build op for child elements of flex containers
-  BuildOp _flexItemOp(BuildMetadata meta) {
-    return BuildOp(
-      defaultStyles: (element) {
-        return {
-          kCssWidth: "auto",
-          kCssHeight: "auto"
-        };
-      }
-    );
-  }
-
-  /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment
-  static MainAxisAlignment _toMainAxisAlignment(String justifyContent) {
-    switch (justifyContent) {
-      case 'flex-start':
-        return MainAxisAlignment.start;
-      case 'flex-end':
-        return MainAxisAlignment.end;
-      case 'center':
-        return MainAxisAlignment.center;
-      case 'space-between':
-        return MainAxisAlignment.spaceBetween;
-      case 'space-around':
-        return MainAxisAlignment.spaceAround;
-      case 'space-evenly':
-        return MainAxisAlignment.spaceEvenly;
-      default:
-        return MainAxisAlignment.start;
-    }
-  }
-
-  /// Converts CSS [alignItems] to Flutter Grid CrossAxisAlignment
-  static CrossAxisAlignment _toCrossAxisAlignment(String alignItems) {
-    switch (alignItems) {
-      case 'flex-start':
-        return CrossAxisAlignment.start;
-      case 'flex-end':
-        return CrossAxisAlignment.end;
-      case 'center':
-        return CrossAxisAlignment.center;
-      case 'baseline':
-        return CrossAxisAlignment.baseline;
-      case 'stretch':
-        return CrossAxisAlignment.stretch;
-      default:
-        return CrossAxisAlignment.start;
-    }
-  }
-
   BuildOp _anchorOp(String id) {
     final anchor = GlobalKey(debugLabel: id);
 
diff --git a/packages/core/lib/src/internal/ops/flex.dart b/packages/core/lib/src/internal/ops/flex.dart
new file mode 100644
index 000000000..6841f6e61
--- /dev/null
+++ b/packages/core/lib/src/internal/ops/flex.dart
@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+
+import '../../../flutter_widget_from_html_core.dart';
+import '../core_ops.dart';
+
+// ignore: avoid_classes_with_only_static_members
+class FlexOps {
+
+  /// Builds custom widget for div elements with display: flex from [meta]
+  static BuildOp flexOp(BuildMetadata meta) {
+    return BuildOp(
+      onChild: (childMeta) {
+        childMeta.register(_flexItemOp(childMeta));
+      },
+      onWidgets: (meta, widgets) {
+        final String id = meta.element.id;
+        String flexDirection = 'row';
+        String justifyContent = 'flex-start';
+        String alignItems = 'flex-start';
+
+        for (final element in meta.element.styles) {
+          final String? value = element.term;
+
+          if (value != null) {
+            switch (element.property) {
+              case 'flex-direction':
+                flexDirection = value;
+              break;
+              case 'justify-content':
+                justifyContent = value;
+              break;
+              case 'align-items':
+                alignItems = value;
+              break;
+            }
+          }
+        }
+
+        return [
+          Flex(
+            key: Key(id),
+            direction: 'row' == flexDirection ? Axis.horizontal : Axis.vertical,
+            mainAxisAlignment: _toMainAxisAlignment(justifyContent),
+            crossAxisAlignment: _toCrossAxisAlignment(alignItems),
+            children: widgets.toList()
+          )
+        ];
+      },      
+    );
+  }
+
+  /// Build op for child elements of flex containers
+  static BuildOp _flexItemOp(BuildMetadata meta) {
+    return BuildOp(
+      defaultStyles: (element) {
+        return {
+          kCssWidth: "auto",
+          kCssHeight: "auto"
+        };
+      }
+    );
+  }
+
+  /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment
+  static MainAxisAlignment _toMainAxisAlignment(String justifyContent) {
+    switch (justifyContent) {
+      case 'flex-start':
+        return MainAxisAlignment.start;
+      case 'flex-end':
+        return MainAxisAlignment.end;
+      case 'center':
+        return MainAxisAlignment.center;
+      case 'space-between':
+        return MainAxisAlignment.spaceBetween;
+      case 'space-around':
+        return MainAxisAlignment.spaceAround;
+      case 'space-evenly':
+        return MainAxisAlignment.spaceEvenly;
+      default:
+        return MainAxisAlignment.start;
+    }
+  }
+
+  /// Converts CSS [alignItems] to Flutter Grid CrossAxisAlignment
+  static CrossAxisAlignment _toCrossAxisAlignment(String alignItems) {
+    switch (alignItems) {
+      case 'flex-start':
+        return CrossAxisAlignment.start;
+      case 'flex-end':
+        return CrossAxisAlignment.end;
+      case 'center':
+        return CrossAxisAlignment.center;
+      case 'baseline':
+        return CrossAxisAlignment.baseline;
+      case 'stretch':
+        return CrossAxisAlignment.stretch;
+      default:
+        return CrossAxisAlignment.start;
+    }
+  }
+  
+}

From 8f65607ad925fdc9fe4c3756755827329caff388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Wed, 27 Sep 2023 21:03:17 +0300
Subject: [PATCH 05/14] Review changes

---
 packages/core/lib/src/core_widget_factory.dart | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index 130cddd12..cb4c2ff58 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -1163,6 +1163,10 @@ class WidgetFactory {
     final anchor = GlobalKey(debugLabel: id);
 
     return BuildOp(
+      onTree: (meta, tree) {
+        _anchorRegistry.register(id, anchor);
+        tree.registerAnchor(anchor);
+      },
       onTreeFlattening: (meta, tree) {
         final widget = WidgetPlaceholder('#$id').wrapWith(
           (context, _) => SizedBox(

From 637cabf2b15ea630d8b00564c37180f4d06b8c0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Wed, 27 Sep 2023 21:08:41 +0300
Subject: [PATCH 06/14] Review changes

---
 packages/core/lib/src/internal/ops/flex.dart  | 56 ++++++++++++-------
 .../lib/src/internal/ops/style_sizing.dart    |  2 +
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/packages/core/lib/src/internal/ops/flex.dart b/packages/core/lib/src/internal/ops/flex.dart
index 6841f6e61..1e149cdf3 100644
--- a/packages/core/lib/src/internal/ops/flex.dart
+++ b/packages/core/lib/src/internal/ops/flex.dart
@@ -3,6 +3,22 @@ import 'package:flutter/material.dart';
 import '../../../flutter_widget_from_html_core.dart';
 import '../core_ops.dart';
 
+const kCssFlexDirection = 'flex-direction';
+const kCssFlexDirectionRow = 'row';
+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';
+
 // ignore: avoid_classes_with_only_static_members
 class FlexOps {
 
@@ -14,22 +30,22 @@ class FlexOps {
       },
       onWidgets: (meta, widgets) {
         final String id = meta.element.id;
-        String flexDirection = 'row';
-        String justifyContent = 'flex-start';
-        String alignItems = 'flex-start';
+        String flexDirection = kCssFlexDirectionRow;
+        String justifyContent = kCssJustifyContentFlexStart;
+        String alignItems = kCssAlignItemsFlexStart;
 
         for (final element in meta.element.styles) {
           final String? value = element.term;
 
           if (value != null) {
             switch (element.property) {
-              case 'flex-direction':
+              case kCssFlexDirection:
                 flexDirection = value;
               break;
-              case 'justify-content':
+              case kCssJustifyContent:
                 justifyContent = value;
               break;
-              case 'align-items':
+              case kCssAlignItems:
                 alignItems = value;
               break;
             }
@@ -39,7 +55,7 @@ class FlexOps {
         return [
           Flex(
             key: Key(id),
-            direction: 'row' == flexDirection ? Axis.horizontal : Axis.vertical,
+            direction: kCssFlexDirectionRow == flexDirection ? Axis.horizontal : Axis.vertical,
             mainAxisAlignment: _toMainAxisAlignment(justifyContent),
             crossAxisAlignment: _toCrossAxisAlignment(alignItems),
             children: widgets.toList()
@@ -54,8 +70,8 @@ class FlexOps {
     return BuildOp(
       defaultStyles: (element) {
         return {
-          kCssWidth: "auto",
-          kCssHeight: "auto"
+          kCssWidth: kCssWidthAuto,
+          kCssHeight: kCssHeightAuto
         };
       }
     );
@@ -64,17 +80,17 @@ class FlexOps {
   /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment
   static MainAxisAlignment _toMainAxisAlignment(String justifyContent) {
     switch (justifyContent) {
-      case 'flex-start':
+      case kCssJustifyContentFlexStart:
         return MainAxisAlignment.start;
-      case 'flex-end':
+      case kCssJustifyContentFlexEnd:
         return MainAxisAlignment.end;
-      case 'center':
+      case kCssJustifyContentCenter:
         return MainAxisAlignment.center;
-      case 'space-between':
+      case kCssJustifyContentSpaceBetween:
         return MainAxisAlignment.spaceBetween;
-      case 'space-around':
+      case kCssJustifyContentSpaceAround:
         return MainAxisAlignment.spaceAround;
-      case 'space-evenly':
+      case kCssJustifyContentSpaceEvenly:
         return MainAxisAlignment.spaceEvenly;
       default:
         return MainAxisAlignment.start;
@@ -84,15 +100,15 @@ class FlexOps {
   /// Converts CSS [alignItems] to Flutter Grid CrossAxisAlignment
   static CrossAxisAlignment _toCrossAxisAlignment(String alignItems) {
     switch (alignItems) {
-      case 'flex-start':
+      case kCssAlignItemsFlexStart:
         return CrossAxisAlignment.start;
-      case 'flex-end':
+      case kCssAlignItemsFlexEnd:
         return CrossAxisAlignment.end;
-      case 'center':
+      case kCssAlignItemsCenter:
         return CrossAxisAlignment.center;
-      case 'baseline':
+      case kCssAlignItemsBaseline:
         return CrossAxisAlignment.baseline;
-      case 'stretch':
+      case kCssAlignItemsStretch:
         return CrossAxisAlignment.stretch;
       default:
         return CrossAxisAlignment.start;
diff --git a/packages/core/lib/src/internal/ops/style_sizing.dart b/packages/core/lib/src/internal/ops/style_sizing.dart
index 3fed9aab5..c10f7e131 100644
--- a/packages/core/lib/src/internal/ops/style_sizing.dart
+++ b/packages/core/lib/src/internal/ops/style_sizing.dart
@@ -6,6 +6,8 @@ const kCssMaxWidth = 'max-width';
 const kCssMinHeight = 'min-height';
 const kCssMinWidth = 'min-width';
 const kCssWidth = 'width';
+const kCssWidthAuto = 'auto';
+const kCssHeightAuto = 'auto';
 
 extension CssLengthToSizing on CssLength {
   CssSizingValue? getSizing(TextStyleHtml tsh) {

From cd3c4b2d5524b2972a8199213ab24105551a1e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Thu, 28 Sep 2023 06:37:15 +0300
Subject: [PATCH 07/14] Review changes

---
 packages/core/lib/src/core_widget_factory.dart | 10 +++-------
 packages/core/lib/src/internal/core_ops.dart   |  1 +
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index cb4c2ff58..371fef197 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -683,13 +683,6 @@ class WidgetFactory {
           ..tsb.enqueue(TextStyleOps.fontStyle, FontStyle.italic);
         break;
       case 'div':
-        final displayExpressions = meta.element.styles.where((element) => element.property == 'display');
-        final displayExpression = displayExpressions.isNotEmpty ? displayExpressions.first : null;
-        final display = displayExpression?.term ?? 'block';
-        if (display == 'flex') {
-          meta.register(FlexOps.flexOp(meta));
-        }
-
         meta[kCssDisplay] = kCssDisplayBlock;
         break;
       case 'article':
@@ -1085,6 +1078,9 @@ class WidgetFactory {
     StyleSizing.registerChild(this, meta);
 
     switch (value) {
+      case kCssDisplayFlex:
+        meta.register(FlexOps.flexOp(meta));
+        break;
       case kCssDisplayBlock:
         StyleSizing.registerBlock(this, meta);
         break;
diff --git a/packages/core/lib/src/internal/core_ops.dart b/packages/core/lib/src/internal/core_ops.dart
index 4cdea41a2..464e9e0e3 100644
--- a/packages/core/lib/src/internal/core_ops.dart
+++ b/packages/core/lib/src/internal/core_ops.dart
@@ -51,6 +51,7 @@ const kCssDisplay = 'display';
 const kCssDisplayBlock = 'block';
 const kCssDisplayInline = 'inline';
 const kCssDisplayInlineBlock = 'inline-block';
+const kCssDisplayFlex = 'flex';
 const kCssDisplayNone = 'none';
 
 const kCssWhitespace = 'white-space';

From 73d2452918d40ed71782a6c45eeddb99d0e5f16e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Thu, 28 Sep 2023 07:28:27 +0300
Subject: [PATCH 08/14] Added basic tests for display: flex

---
 packages/core/test/_.dart                     |  14 +++
 .../core/test/style_display_flex_test.dart    | 114 ++++++++++++++++++
 2 files changed, 128 insertions(+)
 create mode 100644 packages/core/test/style_display_flex_test.dart

diff --git a/packages/core/test/_.dart b/packages/core/test/_.dart
index 47801d162..82b2fe34a 100644
--- a/packages/core/test/_.dart
+++ b/packages/core/test/_.dart
@@ -552,6 +552,16 @@ class Explainer {
     return '+w${FontWeight.values.indexOf(fontWeight)}';
   }
 
+  List<String> _flex(Flex flex) {
+    final List<String> result = [];
+
+    result.add('direction=${flex.direction.toString().replaceFirst('Axis.', '')}');
+    result.add('mainAxisAlignment=${flex.mainAxisAlignment.toString().replaceFirst('MainAxisAlignment.', '')}');
+    result.add('crossAxisAlignment=${flex.crossAxisAlignment.toString().replaceFirst('CrossAxisAlignment.', '')}');
+    
+    return result;
+  }
+
   String _widget(Widget widget) {
     final explained = explainer?.call(this, widget);
     if (explained != null) {
@@ -676,6 +686,10 @@ class Explainer {
       attr.add('message=${widget.message}');
     }
 
+    if (widget is Flex) {
+      attr.addAll(_flex(widget));
+    }
+
     // Special cases
     // `RichText` is a `MultiChildRenderObjectWidget` but needs different logic
     attr.add(
diff --git a/packages/core/test/style_display_flex_test.dart b/packages/core/test/style_display_flex_test.dart
new file mode 100644
index 000000000..93d96e3c4
--- /dev/null
+++ b/packages/core/test/style_display_flex_test.dart
@@ -0,0 +1,114 @@
+import 'package:flutter_test/flutter_test.dart';
+
+import '_.dart';
+
+void main() {
+  group('basic usage', () {
+    const html = '<div style="display: flex"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('horizontal alignment - flex start', () {
+    const html = '<div style="display: flex; align-items: flex-start;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('horizontal alignment - center', () {
+    const html = '<div style="display: flex; align-items: flex-center;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('horizontal alignment - flex end', () {
+    const html = '<div style="display: flex; align-items: flex-end;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=end]'));
+    });
+  });
+
+  group('horizontal alignment - stretch', () {
+    const html = '<div style="display: flex; align-items: stretch;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained,
+          equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=stretch]'));
+    });
+  });
+
+  group('vertical alignment - flex start', () {
+    const html = '<div style="display: flex; justify-content: flex-start;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('vertical alignment - center', () {
+    const html = '<div style="display: flex; justify-content: center;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=center,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('vertical alignment - flex end', () {
+    const html = '<div style="display: flex; justify-content: flex-end;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=end,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('vertical alignment - space between', () {
+    const html = '<div style="display: flex; justify-content: space-between;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=spaceBetween,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('vertical alignment - space around', () {
+    const html = '<div style="display: flex; justify-content: space-around;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=spaceAround,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('vertical alignment - space evenly', () {
+    const html = '<div style="display: flex; justify-content: space-evenly;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=spaceEvenly,crossAxisAlignment=start]'));
+    });
+  });
+
+  group('flex direction - row', () {
+    const html = '<div style="display: flex; flex-direction: row;"></div>';
+
+    testWidgets('renders', (WidgetTester tester) async {
+      final explained = await explain(tester, html);
+      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+    });
+  });
+}

From a6d7473643fd51f397903c50d6a4456b01bff737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Thu, 28 Sep 2023 07:30:35 +0300
Subject: [PATCH 09/14] Renamed FlexOps -> StyleDisplayFlexOps

---
 packages/core/lib/src/core_widget_factory.dart                | 4 ++--
 .../src/internal/ops/{flex.dart => style_display_flex.dart}   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/core/lib/src/internal/ops/{flex.dart => style_display_flex.dart} (99%)

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index 371fef197..34b88e3a3 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -11,7 +11,7 @@ import 'internal/core_ops.dart';
 import 'internal/core_parser.dart';
 import 'internal/flattener.dart';
 import 'internal/margin_vertical.dart';
-import 'internal/ops/flex.dart';
+import 'internal/ops/style_display_flex.dart';
 import 'internal/platform_specific/fallback.dart'
     if (dart.library.io) 'internal/platform_specific/io.dart';
 
@@ -1079,7 +1079,7 @@ class WidgetFactory {
 
     switch (value) {
       case kCssDisplayFlex:
-        meta.register(FlexOps.flexOp(meta));
+        meta.register(StyleDisplayFlexOps.flexOp(meta));
         break;
       case kCssDisplayBlock:
         StyleSizing.registerBlock(this, meta);
diff --git a/packages/core/lib/src/internal/ops/flex.dart b/packages/core/lib/src/internal/ops/style_display_flex.dart
similarity index 99%
rename from packages/core/lib/src/internal/ops/flex.dart
rename to packages/core/lib/src/internal/ops/style_display_flex.dart
index 1e149cdf3..a9561cd33 100644
--- a/packages/core/lib/src/internal/ops/flex.dart
+++ b/packages/core/lib/src/internal/ops/style_display_flex.dart
@@ -20,7 +20,7 @@ const kCssAlignItemsBaseline = 'baseline';
 const kCssAlignItemsStretch = 'stretch';
 
 // ignore: avoid_classes_with_only_static_members
-class FlexOps {
+class StyleDisplayFlexOps {
 
   /// Builds custom widget for div elements with display: flex from [meta]
   static BuildOp flexOp(BuildMetadata meta) {

From 53687aacfcd65c43a990387532bce3de5e3039ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Thu, 28 Sep 2023 08:26:57 +0300
Subject: [PATCH 10/14] Fixed tests

---
 packages/core/test/_.dart | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/test/_.dart b/packages/core/test/_.dart
index 82b2fe34a..191538eaa 100644
--- a/packages/core/test/_.dart
+++ b/packages/core/test/_.dart
@@ -686,7 +686,7 @@ class Explainer {
       attr.add('message=${widget.message}');
     }
 
-    if (widget is Flex) {
+    if (widget is! Column && (widget is Flex)) {
       attr.addAll(_flex(widget));
     }
 

From 876e5e74b23ab95802fe5dad57edeabe516dd6bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Sun, 8 Oct 2023 19:47:55 +0300
Subject: [PATCH 11/14] Fixed formatting issues

---
 .../src/internal/ops/style_display_flex.dart  | 34 ++++-----
 packages/core/test/_.dart                     | 11 ++-
 .../core/test/style_display_flex_test.dart    | 76 ++++++++++++++-----
 3 files changed, 79 insertions(+), 42 deletions(-)

diff --git a/packages/core/lib/src/internal/ops/style_display_flex.dart b/packages/core/lib/src/internal/ops/style_display_flex.dart
index a9561cd33..21f0e1e28 100644
--- a/packages/core/lib/src/internal/ops/style_display_flex.dart
+++ b/packages/core/lib/src/internal/ops/style_display_flex.dart
@@ -21,7 +21,6 @@ const kCssAlignItemsStretch = 'stretch';
 
 // ignore: avoid_classes_with_only_static_members
 class StyleDisplayFlexOps {
-
   /// Builds custom widget for div elements with display: flex from [meta]
   static BuildOp flexOp(BuildMetadata meta) {
     return BuildOp(
@@ -41,40 +40,36 @@ class StyleDisplayFlexOps {
             switch (element.property) {
               case kCssFlexDirection:
                 flexDirection = value;
-              break;
+                break;
               case kCssJustifyContent:
                 justifyContent = value;
-              break;
+                break;
               case kCssAlignItems:
                 alignItems = value;
-              break;
+                break;
             }
           }
         }
 
         return [
           Flex(
-            key: Key(id),
-            direction: kCssFlexDirectionRow == flexDirection ? Axis.horizontal : Axis.vertical,
-            mainAxisAlignment: _toMainAxisAlignment(justifyContent),
-            crossAxisAlignment: _toCrossAxisAlignment(alignItems),
-            children: widgets.toList()
-          )
+              key: Key(id),
+              direction: kCssFlexDirectionRow == flexDirection
+                  ? Axis.horizontal
+                  : Axis.vertical,
+              mainAxisAlignment: _toMainAxisAlignment(justifyContent),
+              crossAxisAlignment: _toCrossAxisAlignment(alignItems),
+              children: widgets.toList())
         ];
-      },      
+      },
     );
   }
 
   /// Build op for child elements of flex containers
   static BuildOp _flexItemOp(BuildMetadata meta) {
-    return BuildOp(
-      defaultStyles: (element) {
-        return {
-          kCssWidth: kCssWidthAuto,
-          kCssHeight: kCssHeightAuto
-        };
-      }
-    );
+    return BuildOp(defaultStyles: (element) {
+      return {kCssWidth: kCssWidthAuto, kCssHeight: kCssHeightAuto};
+    });
   }
 
   /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment
@@ -114,5 +109,4 @@ class StyleDisplayFlexOps {
         return CrossAxisAlignment.start;
     }
   }
-  
 }
diff --git a/packages/core/test/_.dart b/packages/core/test/_.dart
index 191538eaa..f646ef4fb 100644
--- a/packages/core/test/_.dart
+++ b/packages/core/test/_.dart
@@ -555,10 +555,13 @@ class Explainer {
   List<String> _flex(Flex flex) {
     final List<String> result = [];
 
-    result.add('direction=${flex.direction.toString().replaceFirst('Axis.', '')}');
-    result.add('mainAxisAlignment=${flex.mainAxisAlignment.toString().replaceFirst('MainAxisAlignment.', '')}');
-    result.add('crossAxisAlignment=${flex.crossAxisAlignment.toString().replaceFirst('CrossAxisAlignment.', '')}');
-    
+    result.add(
+        'direction=${flex.direction.toString().replaceFirst('Axis.', '')}');
+    result.add(
+        'mainAxisAlignment=${flex.mainAxisAlignment.toString().replaceFirst('MainAxisAlignment.', '')}');
+    result.add(
+        'crossAxisAlignment=${flex.crossAxisAlignment.toString().replaceFirst('CrossAxisAlignment.', '')}');
+
     return result;
   }
 
diff --git a/packages/core/test/style_display_flex_test.dart b/packages/core/test/style_display_flex_test.dart
index 93d96e3c4..59a7e0ddd 100644
--- a/packages/core/test/style_display_flex_test.dart
+++ b/packages/core/test/style_display_flex_test.dart
@@ -8,7 +8,10 @@ void main() {
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
     });
   });
 
@@ -17,7 +20,10 @@ void main() {
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
     });
   });
 
@@ -26,7 +32,10 @@ void main() {
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
     });
   });
 
@@ -35,7 +44,10 @@ void main() {
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=end]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=end]'));
     });
   });
 
@@ -44,17 +56,23 @@ void main() {
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained,
-          equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=stretch]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=stretch]'));
     });
   });
 
   group('vertical alignment - flex start', () {
-    const html = '<div style="display: flex; justify-content: flex-start;"></div>';
+    const html =
+        '<div style="display: flex; justify-content: flex-start;"></div>';
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
     });
   });
 
@@ -63,43 +81,62 @@ void main() {
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=center,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=center,crossAxisAlignment=start]'));
     });
   });
 
   group('vertical alignment - flex end', () {
-    const html = '<div style="display: flex; justify-content: flex-end;"></div>';
+    const html =
+        '<div style="display: flex; justify-content: flex-end;"></div>';
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=end,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=end,crossAxisAlignment=start]'));
     });
   });
 
   group('vertical alignment - space between', () {
-    const html = '<div style="display: flex; justify-content: space-between;"></div>';
+    const html =
+        '<div style="display: flex; justify-content: space-between;"></div>';
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=spaceBetween,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=spaceBetween,crossAxisAlignment=start]'));
     });
   });
 
   group('vertical alignment - space around', () {
-    const html = '<div style="display: flex; justify-content: space-around;"></div>';
+    const html =
+        '<div style="display: flex; justify-content: space-around;"></div>';
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=spaceAround,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=spaceAround,crossAxisAlignment=start]'));
     });
   });
 
   group('vertical alignment - space evenly', () {
-    const html = '<div style="display: flex; justify-content: space-evenly;"></div>';
+    const html =
+        '<div style="display: flex; justify-content: space-evenly;"></div>';
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=spaceEvenly,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=spaceEvenly,crossAxisAlignment=start]'));
     });
   });
 
@@ -108,7 +145,10 @@ void main() {
 
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
-      expect(explained, equals('[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+      expect(
+          explained,
+          equals(
+              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
     });
   });
 }

From 6d3942f79462e5dc86fdbacca7af66c06e69dee0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Fri, 27 Oct 2023 07:27:43 +0300
Subject: [PATCH 12/14] After merge fixes

---
 .../core/lib/src/core_widget_factory.dart     |  5 +-
 .../src/internal/ops/style_display_flex.dart  | 35 +++----
 .../core/test/style_display_flex_test.dart    | 96 ++++++++++++-------
 3 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/packages/core/lib/src/core_widget_factory.dart b/packages/core/lib/src/core_widget_factory.dart
index c33feb44b..b39bd1c2f 100644
--- a/packages/core/lib/src/core_widget_factory.dart
+++ b/packages/core/lib/src/core_widget_factory.dart
@@ -674,9 +674,6 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
           ),
         );
         break;
-      case 'div':
-        meta[kCssDisplay] = kCssDisplayBlock;
-        break;
       case 'article':
       case 'aside':
       case 'dl':
@@ -1138,7 +1135,7 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
 
     switch (value) {
       case kCssDisplayFlex:
-        meta.register(StyleDisplayFlexOps.flexOp(meta));
+        tree.register(StyleDisplayFlexOps.flexOp(tree));
         break;
       case kCssDisplayBlock:
         StyleSizing.registerBlockOp(this, tree);
diff --git a/packages/core/lib/src/internal/ops/style_display_flex.dart b/packages/core/lib/src/internal/ops/style_display_flex.dart
index 21f0e1e28..e731c50b2 100644
--- a/packages/core/lib/src/internal/ops/style_display_flex.dart
+++ b/packages/core/lib/src/internal/ops/style_display_flex.dart
@@ -22,18 +22,18 @@ const kCssAlignItemsStretch = 'stretch';
 // ignore: avoid_classes_with_only_static_members
 class StyleDisplayFlexOps {
   /// Builds custom widget for div elements with display: flex from [meta]
-  static BuildOp flexOp(BuildMetadata meta) {
+  static BuildOp flexOp(BuildTree tree) {
     return BuildOp(
-      onChild: (childMeta) {
-        childMeta.register(_flexItemOp(childMeta));
+      onVisitChild: (tree, subTree) {
+        subTree.register(_flexItemOp(subTree));
       },
-      onWidgets: (meta, widgets) {
-        final String id = meta.element.id;
+      onRenderBlock: (tree, placeholder) {
+        final String id = tree.element.id;
         String flexDirection = kCssFlexDirectionRow;
         String justifyContent = kCssJustifyContentFlexStart;
         String alignItems = kCssAlignItemsFlexStart;
 
-        for (final element in meta.element.styles) {
+        for (final element in tree.element.styles) {
           final String? value = element.term;
 
           if (value != null) {
@@ -51,22 +51,23 @@ class StyleDisplayFlexOps {
           }
         }
 
-        return [
-          Flex(
-              key: Key(id),
-              direction: kCssFlexDirectionRow == flexDirection
-                  ? Axis.horizontal
-                  : Axis.vertical,
-              mainAxisAlignment: _toMainAxisAlignment(justifyContent),
-              crossAxisAlignment: _toCrossAxisAlignment(alignItems),
-              children: widgets.toList())
-        ];
+        return Flex(
+          key: Key(id),
+          direction: kCssFlexDirectionRow == flexDirection
+              ? Axis.horizontal
+              : Axis.vertical,
+          mainAxisAlignment: _toMainAxisAlignment(justifyContent),
+          crossAxisAlignment: _toCrossAxisAlignment(alignItems),
+          children: [
+            placeholder,
+          ],
+        );
       },
     );
   }
 
   /// Build op for child elements of flex containers
-  static BuildOp _flexItemOp(BuildMetadata meta) {
+  static BuildOp _flexItemOp(BuildTree tree) {
     return BuildOp(defaultStyles: (element) {
       return {kCssWidth: kCssWidthAuto, kCssHeight: kCssHeightAuto};
     });
diff --git a/packages/core/test/style_display_flex_test.dart b/packages/core/test/style_display_flex_test.dart
index 59a7e0ddd..95b214edb 100644
--- a/packages/core/test/style_display_flex_test.dart
+++ b/packages/core/test/style_display_flex_test.dart
@@ -9,9 +9,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -21,9 +23,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -33,9 +37,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -45,9 +51,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=end]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=end,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -57,9 +65,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=stretch]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=stretch,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -70,9 +80,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -82,9 +94,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=center,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=center,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -95,9 +109,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=end,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=end,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -108,9 +124,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=spaceBetween,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=spaceBetween,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -121,9 +139,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=spaceAround,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=spaceAround,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -134,9 +154,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=spaceEvenly,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=spaceEvenly,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 
@@ -146,9 +168,11 @@ void main() {
     testWidgets('renders', (WidgetTester tester) async {
       final explained = await explain(tester, html);
       expect(
-          explained,
-          equals(
-              '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start]'));
+        explained,
+        equals(
+          '[Flex:direction=horizontal,mainAxisAlignment=start,crossAxisAlignment=start,children=[widget0]]',
+        ),
+      );
     });
   });
 }

From c74535243a413bda383b0d00ec6946344637d6e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Fri, 27 Oct 2023 07:31:49 +0300
Subject: [PATCH 13/14] Fixed formatter issues

---
 .../core/lib/src/internal/ops/style_display_flex.dart     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/core/lib/src/internal/ops/style_display_flex.dart b/packages/core/lib/src/internal/ops/style_display_flex.dart
index e731c50b2..852b58203 100644
--- a/packages/core/lib/src/internal/ops/style_display_flex.dart
+++ b/packages/core/lib/src/internal/ops/style_display_flex.dart
@@ -68,9 +68,11 @@ class StyleDisplayFlexOps {
 
   /// Build op for child elements of flex containers
   static BuildOp _flexItemOp(BuildTree tree) {
-    return BuildOp(defaultStyles: (element) {
-      return {kCssWidth: kCssWidthAuto, kCssHeight: kCssHeightAuto};
-    });
+    return BuildOp(
+      defaultStyles: (element) {
+        return {kCssWidth: kCssWidthAuto, kCssHeight: kCssHeightAuto};
+      },
+    );
   }
 
   /// Converts CSS [justifyContent] to Flutter Grid MainAxisAlignment

From 7a271882dd30df9a8826bcd482db98b4d008d272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20Lepp=C3=A4?= <antti.leppa@metatavu.fi>
Date: Fri, 27 Oct 2023 07:34:23 +0300
Subject: [PATCH 14/14] Formatter issues

---
 packages/core/test/_.dart | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/core/test/_.dart b/packages/core/test/_.dart
index 578bee10c..7ce416e79 100644
--- a/packages/core/test/_.dart
+++ b/packages/core/test/_.dart
@@ -560,11 +560,14 @@ class Explainer {
     final List<String> result = [];
 
     result.add(
-        'direction=${flex.direction.toString().replaceFirst('Axis.', '')}');
+      'direction=${flex.direction.toString().replaceFirst('Axis.', '')}',
+    );
     result.add(
-        'mainAxisAlignment=${flex.mainAxisAlignment.toString().replaceFirst('MainAxisAlignment.', '')}');
+      'mainAxisAlignment=${flex.mainAxisAlignment.toString().replaceFirst('MainAxisAlignment.', '')}',
+    );
     result.add(
-        'crossAxisAlignment=${flex.crossAxisAlignment.toString().replaceFirst('CrossAxisAlignment.', '')}');
+      'crossAxisAlignment=${flex.crossAxisAlignment.toString().replaceFirst('CrossAxisAlignment.', '')}',
+    );
 
     return result;
   }