diff --git a/components/content/examples/flex/CompareFlex.vue b/components/content/examples/flex/CompareFlex.vue
new file mode 100644
index 0000000..3309f60
--- /dev/null
+++ b/components/content/examples/flex/CompareFlex.vue
@@ -0,0 +1,30 @@
+
+
+ Flex and Spacer: Full width, equal Spacing
+
+
+
+
+
+
+
+
+
+ Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
+
+
+
+
+
+
+
+
+ HStack: The children have equal spacing but don't span the whole container
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/flex/SignUpFlex.vue b/components/content/examples/flex/SignUpFlex.vue
new file mode 100644
index 0000000..41b6128
--- /dev/null
+++ b/components/content/examples/flex/SignUpFlex.vue
@@ -0,0 +1,12 @@
+
+
+
+ Chakra App
+
+
+
+ Sign Up
+ Log in
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/flex/SimpleFlex.vue b/components/content/examples/flex/SimpleFlex.vue
new file mode 100644
index 0000000..080ae22
--- /dev/null
+++ b/components/content/examples/flex/SimpleFlex.vue
@@ -0,0 +1,13 @@
+
+
+
+ Box 1
+
+
+ Box 2
+
+
+ Box 3
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/flex/SpacerFlex.vue b/components/content/examples/flex/SpacerFlex.vue
new file mode 100644
index 0000000..63ad0da
--- /dev/null
+++ b/components/content/examples/flex/SpacerFlex.vue
@@ -0,0 +1,11 @@
+
+
+
+ Box 1
+
+
+
+ Box 2
+
+
+
\ No newline at end of file
diff --git a/content/4.components/flex.md b/content/4.components/flex.md
new file mode 100644
index 0000000..5b08b3b
--- /dev/null
+++ b/content/4.components/flex.md
@@ -0,0 +1,138 @@
+---
+title: Flex
+description: Flex Component
+version: 2.0+
+---
+
+# Flex
+
+Flex is `CBox` with `display: flex` and comes with helpful style shorthand. It renders a `div` element.
+
+## Import
+
+```js
+import { CFlex, CSpacer } from '@chakra-ui/vue-next';
+```
+
+- Flex: A `CBox` with `display: flex`.
+- Spacer: Creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex.
+
+## Usage
+
+When using the Flex component, you can use some of the following helpful shorthand props:
+
+- `direction` for `flexDirection`
+- `wrap` for `flexWrap`
+- `align` for `alignItems`
+- `justify` for `justifyContent`
+
+While you can pass the verbose props, using the shorthand can save you some time.
+
+::showcase
+::simple-flex{width=full}
+::
+::
+
+```html
+
+
+ Box 1
+
+
+ Box 2
+
+
+ Box 3
+
+
+```
+
+### Using the Spacer
+
+As an alternative to `CStack`, you can combine `CFlex` and `CSpacer` to create stackable and responsive layouts.
+
+::showcase
+::spacer-flex{width=full}
+::
+::
+
+```html
+
+
+ Box 1
+
+
+
+ Box 2
+
+
+```
+
+### Flex and Spacer vs Grid vs Stack
+
+The `CFlex` and `CSpacer` components, `CGrid` and `CHStack` treat children of different widths differently.
+
+- In `CHStack`, the children will have equal spacing between them but they won't span the entire width of the container.
+- In `CGrid`, the starting points of the children will be equally spaced but the gaps between them will not be equal.
+- With `CFlex` and `CSpacer`, the children will span the entire width of the container and also have equal spacing between them.
+
+::showcase
+::compare-flex{width=full}
+::
+::
+
+```html
+
+ Flex and Spacer: Full width, equal Spacing
+
+
+
+
+
+
+
+
+
+ Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
+
+
+
+
+
+
+
+
+ HStack: The children have equal spacing but don't span the whole container
+
+
+
+
+
+
+
+ ```
+
+ A good use case for `CSpacer` is to create a navbar with a signup/login button aligned to the right.
+
+Since `CSpacer` renders a `div`, any `gap` value provided to the parent is applied to both sides of this component, and therefore make the gap appear doubled when the spacer is completely collapsed.
+
+> The example below is not responsive on purpose as you might switch to a collapsed menu on mobile.
+
+::showcase
+::sign-up-flex{width=full}
+::
+::
+
+```html
+
+
+ Chakra App
+
+
+
+ Sign Up
+ Log in
+
+
+```
\ No newline at end of file