diff --git a/packages/react-core/src/layouts/Flex/examples/Flex.md b/packages/react-core/src/layouts/Flex/examples/Flex.md
index 7b639836198..30d0a0fa3cd 100644
--- a/packages/react-core/src/layouts/Flex/examples/Flex.md
+++ b/packages/react-core/src/layouts/Flex/examples/Flex.md
@@ -11,52 +11,20 @@ import './flex.css';
 
 ### Basic
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexBasic.tsx"
 
-<Flex>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Nesting
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexNesting.tsx"
 
-<Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Nested with items
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexNestedItems.tsx"
 
-<Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Spacing
@@ -73,252 +41,92 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Individually spaced
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexIndividuallySpaced.tsx"
 
-<Flex>
-  <FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
-  <FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
-  <FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
-  <FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
-  <FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
-  <FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
-  <FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
-  <FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
-</Flex>;
 ```
 
 ### Spacing xl
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexSpacingXl.tsx"
 
-<Flex spaceItems={{ default: 'spaceItemsXl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Spacing none
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexSpacingNone.tsx"
 
-<Flex spaceItems={{ default: 'spaceItemsNone' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Flex gap spacing
 
 ### Row gap
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexRowGap.tsx"
 
-<Flex rowGap={{ default: 'rowGap2xl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Column gap
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexColumnGap.tsx"
 
-<Flex columnGap={{ default: 'columnGap2xl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Gap
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexGap.tsx"
 
-<Flex gap={{ default: 'gap2xl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Flex layout modifiers
 
 ### Default layout
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexDefaultLayout.tsx"
 
-<Flex className="example-border">
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Inline
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexInline.tsx"
 
-<Flex className="example-border" display={{ default: 'inlineFlex' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Using canGrow
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexCanGrow.tsx"
 
-<Flex>
-  <Flex grow={{ default: 'grow' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Adjusting width
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAdjustingWidth.tsx"
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Specifying column widths
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexColumnWidths.tsx"
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_2' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_3' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Column layout modifiers
 
 ### Column layout
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexColumnLayout.tsx"
 
-<Flex direction={{ default: 'column' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Stacking elements
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexStackingElements.tsx"
 
-<Flex direction={{ default: 'column' }}>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Nesting elements in columns
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexNestingInColumns.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Responsive layout modifiers
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx
new file mode 100644
index 00000000000..5e4422ea1a3
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAdjustingWidth: React.FunctionComponent = () => (
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx b/packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx
new file mode 100644
index 00000000000..ac6e9eea82a
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexBasic: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx b/packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx
new file mode 100644
index 00000000000..b61e11ebd6d
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexCanGrow: React.FunctionComponent = () => (
+  <Flex>
+    <Flex grow={{ default: 'grow' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx b/packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx
new file mode 100644
index 00000000000..d58d57b6cf1
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexColumnGap: React.FunctionComponent = () => (
+  <Flex columnGap={{ default: 'columnGap2xl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx b/packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx
new file mode 100644
index 00000000000..936e5aabf5e
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx
@@ -0,0 +1,9 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexColumnLayout: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexColumnWidths.tsx b/packages/react-core/src/layouts/Flex/examples/FlexColumnWidths.tsx
new file mode 100644
index 00000000000..d87ec7cb0be
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexColumnWidths.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexColumnWidths: React.FunctionComponent = () => (
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_2' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_3' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexDefaultLayout.tsx b/packages/react-core/src/layouts/Flex/examples/FlexDefaultLayout.tsx
new file mode 100644
index 00000000000..528913ff874
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexDefaultLayout.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexDefaultLayout: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexGap.tsx b/packages/react-core/src/layouts/Flex/examples/FlexGap.tsx
new file mode 100644
index 00000000000..72129afb7d8
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexGap.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexGap: React.FunctionComponent = () => (
+  <Flex gap={{ default: 'gap2xl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx b/packages/react-core/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx
new file mode 100644
index 00000000000..2aacf1aa1be
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx
@@ -0,0 +1,14 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexIndividuallySpaced: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
+    <FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
+    <FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
+    <FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
+    <FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
+    <FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
+    <FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
+    <FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexInline.tsx b/packages/react-core/src/layouts/Flex/examples/FlexInline.tsx
new file mode 100644
index 00000000000..1d4a4b74276
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexInline.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexInline: React.FunctionComponent = () => (
+  <Flex className="example-border" display={{ default: 'inlineFlex' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexNestedItems.tsx b/packages/react-core/src/layouts/Flex/examples/FlexNestedItems.tsx
new file mode 100644
index 00000000000..b12357c893a
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexNestedItems.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexNestedItems: React.FunctionComponent = () => (
+  <Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexNesting.tsx b/packages/react-core/src/layouts/Flex/examples/FlexNesting.tsx
new file mode 100644
index 00000000000..09b22af5d97
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexNesting.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexNesting: React.FunctionComponent = () => (
+  <Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx b/packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx
new file mode 100644
index 00000000000..16e97e0895e
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexNestingInColumns: React.FunctionComponent = () => (
+  <Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexRowGap.tsx b/packages/react-core/src/layouts/Flex/examples/FlexRowGap.tsx
new file mode 100644
index 00000000000..620dce53279
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexRowGap.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexRowGap: React.FunctionComponent = () => (
+  <Flex rowGap={{ default: 'rowGap2xl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexSpacingNone.tsx b/packages/react-core/src/layouts/Flex/examples/FlexSpacingNone.tsx
new file mode 100644
index 00000000000..ccbac452b34
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexSpacingNone.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexSpacingNone: React.FunctionComponent = () => (
+  <Flex spaceItems={{ default: 'spaceItemsNone' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexSpacingXl.tsx b/packages/react-core/src/layouts/Flex/examples/FlexSpacingXl.tsx
new file mode 100644
index 00000000000..8276b4bc7a1
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexSpacingXl.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexSpacingXl: React.FunctionComponent = () => (
+  <Flex spaceItems={{ default: 'spaceItemsXl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx b/packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx
new file mode 100644
index 00000000000..e3c742e5614
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexStackingElements: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column' }}>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);