fix: Flex defaults

Author: surajshetty3416

frontend/src/components/BlockFlexLayoutHandler.vue

@@ -6,7 +6,7 @@
 			{ label: 'Horizontal', value: 'row', icon: 'arrow-right', hideLabel: true },
 			{ label: 'Vertical', value: 'column', icon: 'arrow-down', hideLabel: true },
 		]"
-		:modelValue="blockController.getStyle('flexDirection') || 'column'"
+		:modelValue="blockController.getStyle('flexDirection') || 'row'"
 		@update:modelValue="
 			(val: string | number) => blockController.setStyle('flexDirection', val)
 		"></OptionToggle>
@@ -17,6 +17,7 @@
 		type="select"
 		label="Distribution"
 		:options="[
+			{ label: '', value: '' },
 			{ label: 'Space Between', value: 'space-between' },
 			{ label: 'Space Around', value: 'space-around' },
 			{ label: 'Space Evenly', value: 'space-evenly' },

frontend/src/components/BlockProperties.vue

@@ -392,7 +392,7 @@ const layoutSectionProperties = [
 						value: "grid",
 					},
 				],
-				modelValue: blockController.getStyle("display") || "flex",
+				modelValue: blockController.getStyle("display"),
 			};
 		},
 		searchKeyWords: "Layout, Display, Flex, Grid, Flexbox, Flex Box, FlexBox",

frontend/src/components/PlacementControl.vue

@@ -98,9 +98,9 @@ const placementOptions = [
 	"bottom-right",
 ];
 
-const direction = computed(() => blockController.getStyle("flexDirection") as string);
-const justifyContent = computed(() => blockController.getStyle("justifyContent") as string);
-const alignItems = computed(() => blockController.getStyle("alignItems") as string);
+const direction = computed(() => (blockController.getStyle("flexDirection") || "row") as string);
+const justifyContent = computed(() => (blockController.getStyle("justifyContent") || "flex-start") as string);
+const alignItems = computed(() => (blockController.getStyle("alignItems") || "stretch") as string);
 
 const setAlignment = (alignment: string, spaceBetween: boolean = false) => {
 	switch (alignment) {