Styling fixes

src/core/client/ui/components/Flex/Flex.tsx

@@ -46,6 +46,11 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ...rest
   } = props;
 
+  let alignItemsWithDefault = alignItems;
+  if (!direction || !direction.startsWith("column")) {
+    alignItemsWithDefault = "center";
+  }
+
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
@@ -59,8 +64,10 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ] = true;
   }
 
-  if (alignItems) {
-    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
+  if (alignItemsWithDefault) {
+    classObject[
+      (classes as any)[`align${pascalCase(alignItemsWithDefault)}`]
+    ] = true;
   }
 
   if (direction) {
@@ -72,10 +79,6 @@ const Flex: StatelessComponent<InnerProps> = props => {
   return <div ref={forwardRef} className={classNames} {...rest} />;
 };
 
-Flex.defaultProps = {
-  alignItems: "center",
-};
-
 const enhanced = withForwardRef(withStyles(styles)(Flex));
 export default enhanced;
 export type FlexProps = PropTypesOf<typeof enhanced>;