diff --git a/packages/components/src/components/FlexBox/FlexBox.module.css b/packages/components/src/components/FlexBox/FlexBox.module.css
index b99f0006..2ff884db 100644
--- a/packages/components/src/components/FlexBox/FlexBox.module.css
+++ b/packages/components/src/components/FlexBox/FlexBox.module.css
@@ -1,4 +1,6 @@
 .base {
+  --flex-row-gap: 0;
+  --flex-column-gap: 0;
   --flex-type: flex;
   --flex-wrap: nowrap;
   --flex-direction: row;
diff --git a/packages/components/src/components/layout/flex/flex.module.css b/packages/components/src/components/layout/flex/flex.module.css
index 26e65f6b..aa92c65a 100644
--- a/packages/components/src/components/layout/flex/flex.module.css
+++ b/packages/components/src/components/layout/flex/flex.module.css
@@ -1,5 +1,6 @@
 .base {
-  --flex-gap: 0;
+  --flex-row-gap: 0;
+  --flex-column-gap: 0;
   --flex-order: 0;
   --flex-type: flex;
   --flex-wrap: nowrap;
diff --git a/packages/components/src/components/layout/flex/flex.stories.tsx b/packages/components/src/components/layout/flex/flex.stories.tsx
index 07d1a9df..5e9e8b1c 100644
--- a/packages/components/src/components/layout/flex/flex.stories.tsx
+++ b/packages/components/src/components/layout/flex/flex.stories.tsx
@@ -63,6 +63,22 @@ const meta = {
         type: { summary: 'FlexPropGap' },
       },
     },
+    colGap: {
+      description: 'column-gap',
+      options: flexPropGap,
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'FlexPropGap' },
+      },
+    },
+    rowGap: {
+      description: 'row-gap',
+      options: flexPropGap,
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'FlexPropGap' },
+      },
+    },
     order: {
       options: flexPropOrder,
       control: { type: 'select' },