diff --git a/__snapshots__/flex--example-flex-chromium.png b/__snapshots__/flex--example-flex-chromium.png
new file mode 100644
index 00000000..d5cd7201
Binary files /dev/null and b/__snapshots__/flex--example-flex-chromium.png differ
diff --git a/__snapshots__/flex--example-flex-firefox.png b/__snapshots__/flex--example-flex-firefox.png
new file mode 100644
index 00000000..78bda6b4
Binary files /dev/null and b/__snapshots__/flex--example-flex-firefox.png differ
diff --git a/__snapshots__/flex--example-flex-webkit.png b/__snapshots__/flex--example-flex-webkit.png
new file mode 100644
index 00000000..8a0823ed
Binary files /dev/null and b/__snapshots__/flex--example-flex-webkit.png differ
diff --git a/package.json b/package.json
index b64af853..bc23924e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "dev": "npm run storybook:dev",
diff --git a/src/components/flex/Flex.stories.tsx b/src/components/flex/Flex.stories.tsx
new file mode 100644
index 00000000..44038173
--- /dev/null
+++ b/src/components/flex/Flex.stories.tsx
@@ -0,0 +1,20 @@
+import {Meta} from "@storybook/react";
+import React from "react";
+import Flex from "./Flex";
+import Text from "../Text/Text";
+
+const meta: Meta = {
+    title: "Flex",
+    component: Flex
+}
+
+export default meta
+
+export const ExampleFlex = () => {
+
+    return <Flex>
+        <Text size={"md"} mr={1}>Example Text 1</Text>
+        <Text size={"md"}>Example Text 2</Text>
+    </Flex>
+
+}
\ No newline at end of file
diff --git a/src/components/flex/Flex.style.scss b/src/components/flex/Flex.style.scss
new file mode 100644
index 00000000..271fd71c
--- /dev/null
+++ b/src/components/flex/Flex.style.scss
@@ -0,0 +1,3 @@
+.flex {
+  display: flex;
+}
\ No newline at end of file
diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
new file mode 100644
index 00000000..1040b513
--- /dev/null
+++ b/src/components/flex/Flex.tsx
@@ -0,0 +1,20 @@
+import {Code0Component} from "../../utils/types";
+import React from "react";
+import {mergeCode0Props} from "../../utils/utils";
+import "./Flex.style.scss";
+
+interface FlexType extends Code0Component<HTMLDivElement> {
+    children: React.ReactNode | React.ReactNode[]
+}
+
+const Flex: React.FC<FlexType> = props => {
+
+    const {children, ...rest} = props
+
+    return <div {...mergeCode0Props("flex", rest)}>
+        {children}
+    </div>
+
+}
+
+export default Flex
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 1fd431ec..7c6d7c59 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,3 +14,4 @@ export { default as Popover} from "./components/popover/Popover"
 export { default as Quote} from "./components/quote/Quote"
 export { default as Row} from "./components/row/Row"
 export { default as Tooltip} from "./components/tooltip/Tooltip"
+export { default as Flex} from "./components/flex/Flex"