diff --git a/packages/ui/react/src/components/layout/create-css-property-style-variants.ts b/packages/ui/react/src/components/layout/create-css-property-style-variants.ts
deleted file mode 100644
index 29591f0..0000000
--- a/packages/ui/react/src/components/layout/create-css-property-style-variants.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { type CSSProperties } from 'react';
-
-export type CSSPropertyValue<Property extends keyof CSSProperties> = Exclude<
-  CSSProperties[Property],
-  object | undefined
->;
-
-export function createCSSPropertyStyleVariants<
-  PropertyKey extends keyof CSSProperties,
-  PropertyValue extends CSSPropertyValue<PropertyKey> | number | string,
->(
-  property: PropertyKey,
-  propertyValues: (number | string)[] | PropertyValue[],
-) {
-  const propertyValueRecord = propertyValues.reduce(
-    (accumulator, currentPropertyValue) => ({
-      ...accumulator,
-      [currentPropertyValue]: currentPropertyValue,
-    }),
-    {} as Record<PropertyValue, PropertyValue>,
-  );
-
-  const propertyStyleVariants = styleVariants(
-    propertyValueRecord,
-    (propertyValue) => ({
-      [property]: propertyValue,
-    }),
-  );
-
-  return propertyStyleVariants;
-}
diff --git a/packages/ui/react/src/components/layout/flex.css.ts b/packages/ui/react/src/components/layout/flex.css.ts
new file mode 100644
index 0000000..3af23c2
--- /dev/null
+++ b/packages/ui/react/src/components/layout/flex.css.ts
@@ -0,0 +1,53 @@
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { dynamicStyles, dynamicVars, enumStyles } from '../../styles/utils';
+
+const {
+  display: { none, flex, inlineFlex },
+  alignItems: align,
+  justifyContent: justify,
+  flexWrap: wrap,
+  flexDirection: direction,
+} = enumStyles;
+
+export const flexEnumVariants = recipe({
+  variants: {
+    display: {
+      none,
+      flex,
+      inlineFlex,
+    },
+    align,
+    direction,
+    justify,
+    wrap,
+  },
+
+  defaultVariants: {
+    display: 'flex',
+  },
+});
+
+export type FlexEnumVariants = Exclude<
+  RecipeVariants<typeof flexEnumVariants>,
+  undefined
+>;
+
+const { gapVar, gapXVar, gapYVar } = dynamicVars;
+
+export const flexDynamicVariantVars = {
+  gapVar,
+  gapXVar,
+  gapYVar,
+};
+
+const { gap, gapX, gapY } = dynamicStyles;
+
+export const flexDynamicVariants = {
+  gap,
+  gapX,
+  gapY,
+};
+
+export type FlexDynamicVariants = Partial<
+  Record<keyof typeof flexDynamicVariants, number | string>
+>;
diff --git a/packages/ui/react/src/components/layout/flex.styles.css.ts b/packages/ui/react/src/components/layout/flex.styles.css.ts
deleted file mode 100644
index e194987..0000000
--- a/packages/ui/react/src/components/layout/flex.styles.css.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { flexStyleVars } from '../../styles';
-
-export const flexBase = style({
-  display: 'flex',
-  ...flexStyleVars,
-});
diff --git a/packages/ui/react/src/components/layout/flex.tsx b/packages/ui/react/src/components/layout/flex.tsx
index 5caf288..45b03b6 100644
--- a/packages/ui/react/src/components/layout/flex.tsx
+++ b/packages/ui/react/src/components/layout/flex.tsx
@@ -1,33 +1,42 @@
-import {
-  type HTMLFavolinkProps,
-  favolink,
-  forwardRef,
-} from '@favolink-ui/system';
+import { forwardRef } from '@favolink-ui/system';
 import { cx } from '@favolink-ui/utils';
-import * as styles from './flex.styles.css';
-import { extractProps } from '../../extract-props';
-import {
-  type FlexStyleProps,
-  flexStyleProps,
-  flexStyleVars,
-} from '../../styles';
+import { Box, type BoxProps } from './box';
+import * as styles from './flex.css';
+import { extractDynamicProps } from '../../styles';
 
-export type FlexProps = FlexStyleProps & HTMLFavolinkProps<'div'>;
+export type FlexProps = BoxProps &
+  styles.FlexDynamicVariants &
+  styles.FlexEnumVariants;
 
-export const Flex = forwardRef<FlexProps, 'div'>(function Flex(props, ref) {
-  const { children, className, ...restProps } = extractProps(
-    props,
-    flexStyleVars,
-    flexStyleProps,
-  );
+export const Flex = forwardRef<FlexProps, typeof Box>(
+  function Flex(props, forwardedRef) {
+    const {
+      children,
+      className,
+      display,
+      align,
+      direction,
+      justify,
+      wrap,
+      ...restProps
+    } = extractDynamicProps(
+      props,
+      styles.flexDynamicVariantVars,
+      styles.flexDynamicVariants,
+    );
 
-  return (
-    <favolink.div
-      {...restProps}
-      ref={ref}
-      className={cx(styles.flexBase, className)}
-    >
-      {children}
-    </favolink.div>
-  );
-});
+    return (
+      <Box
+        {...restProps}
+        ref={forwardedRef}
+        className={cx(
+          'favolink-flex',
+          styles.flexEnumVariants({ display, align, direction, justify, wrap }),
+          className,
+        )}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
diff --git a/packages/ui/react/src/components/layout/index.ts b/packages/ui/react/src/components/layout/index.ts
index 5c35e3d..72b604d 100644
--- a/packages/ui/react/src/components/layout/index.ts
+++ b/packages/ui/react/src/components/layout/index.ts
@@ -1,8 +1,3 @@
 /* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
-export {
-  createCSSPropertyStyleVariants,
-  type CSSPropertyValue,
-} from './create-css-property-style-variants';
-
 export { Box, type BoxProps } from './box';
 export { Flex, type FlexProps } from './flex';