css: fix flex-gap and align-items for flex

Author: softmarshmallow

packages/builder-web-core/widgets-native/flex/index.ts

@@ -123,10 +123,14 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
       overflow: this.overflow,
       ...css.justifyContent(this.mainAxisAlignment),
       "flex-direction": direction(this.direction),
-      "align-items": this.crossAxisAlignment,
+      "align-items": flex_align_items(this.crossAxisAlignment),
       flex: this.flex,
       "flex-wrap": this.flexWrap,
-      gap: this.itemSpacing && css.px(this.itemSpacing),
+      gap:
+        // if justify-content is set to space-between, do not set the gap.
+        this.mainAxisAlignment == MainAxisAlignment.spaceBetween
+          ? undefined
+          : this.itemSpacing && css.px(this.itemSpacing),
       "box-shadow": css.boxshadow(...(this.boxShadow ?? [])),
       ...css.border(this.border),
       ...css.borderRadius(this.borderRadius),
@@ -153,3 +157,24 @@ function direction(axis: Axis): CSSProperty.FlexDirection {
   }
   throw `axis value of "${axis}" is not a valid reflect Axis value.`;
 }
+
+/**
+ * explicit css value with `flex-` prefix for start, end
+ * why? - "start" and "end" also attributes to the box itself -> to be more flex-specific.
+ * @param alignment
+ * @returns
+ */
+function flex_align_items(alignment: CrossAxisAlignment) {
+  switch (alignment) {
+    case CrossAxisAlignment.start:
+      return "flex-start";
+    case CrossAxisAlignment.end:
+      return "flex-end";
+    case CrossAxisAlignment.center:
+      return "center";
+    case CrossAxisAlignment.stretch:
+      return "stretch";
+    case CrossAxisAlignment.baseline:
+      return "baseline";
+  }
+}