diff --git a/src/Flex.d.ts b/src/Flex.d.ts
index eec63fe..0772ba6 100644
--- a/src/Flex.d.ts
+++ b/src/Flex.d.ts
@@ -17,6 +17,7 @@ export interface FlexProps {
   justify?: Justify;
   direction?: Direction;
   reverse?: boolean;
+  gap?: string;
 }
 
 export default class Flex extends SvelteComponentTyped<FlexProps> {}
diff --git a/src/Flex.svelte b/src/Flex.svelte
index 41f862d..a54df70 100644
--- a/src/Flex.svelte
+++ b/src/Flex.svelte
@@ -3,6 +3,7 @@
   export let align = 'center';
   export let justify = 'center';
   export let reverse = false;
+  export let gap = undefined;
 
   //  'start' | 'center' | 'end' | 'stretch'
   const alignMap = {
@@ -22,6 +23,7 @@
     evenly: 'space-evenly',
   };
 
+
   $: directionWithReverse = reverse ? `${direction}-reverse` : direction;
 </script>
 
@@ -32,6 +34,7 @@
   style:flex-direction={directionWithReverse}
   style:align-items={alignMap[align]}
   style:justify-content={justifyMap[justify]}
+  style:gap={gap}
 >
   <slot />
 </div>
diff --git a/src/__tests__/Flex.spec.js b/src/__tests__/Flex.spec.js
index 6d7f39a..c860c66 100644
--- a/src/__tests__/Flex.spec.js
+++ b/src/__tests__/Flex.spec.js
@@ -140,4 +140,18 @@ describe('<Flex /> component', () => {
       expect(container).not.toHaveStyle('flex-direction: column'); // default/fallback
     });
   });
+
+  describe('gap prop', () => {
+    test('has gap prop set to 1 rem', () => {
+      const container = renderFlex({ gap: '1rem' });
+      expect(container).toHaveStyle('gap: 1rem');
+      expect(container).not.toHaveStyle('gap: 0rem');
+    });
+
+    test('bad value', () => {
+      const container = renderFlex({ gap: 'oops' });
+      expect(container).not.toHaveStyle('gap: 1rem');
+      expect(container).not.toHaveStyle('gap: 0');
+    });
+  })
 });