diff --git a/packages/react-core/src/layouts/Flex/examples/Flex.md b/packages/react-core/src/layouts/Flex/examples/Flex.md
index 7b639836198..b6616e45b00 100644
--- a/packages/react-core/src/layouts/Flex/examples/Flex.md
+++ b/packages/react-core/src/layouts/Flex/examples/Flex.md
@@ -325,322 +325,114 @@ import { Flex, FlexItem } from '@patternfly/react-core';
 
 ### Switching between direction column and row
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexSwitchingColumnRow.tsx"
 
-<Flex direction={{ default: 'column', lg: 'row' }}>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <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>;
 ```
 
 ### Controlling width of text
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexControlTextWidth.tsx"
 
-<Flex direction={{ default: 'column', lg: 'row' }}>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam
-      dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.
-    </FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Flex alignment
 
 ### Aligning right
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAligningRight.tsx"
 
-<Flex className="example-border">
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Align right on single item
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignRightSingleItem.tsx"
 
-<Flex className="example-border">
-  <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Align right on multiple groups
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignRightMultipleGroups.tsx"
 
-<Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex align={{ default: 'alignRight' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex align={{ default: 'alignRight' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align adjacent content
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignAdjacentContent.tsx"
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self flex end
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfFlexEnd.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfFlexEnd' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self center
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfCenter.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self baseline
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfBaseline.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfBaseline' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self stretch
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfStretch.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfStretch' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Flex justification
 
 ### Justify content flex end
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexJustifyContentEnd.tsx"
 
-<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexEnd' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Justify content space between
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexJustifyContentSpaceBetween.tsx"
 
-<Flex className="example-border" justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Justify content flex start
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexJustifyContentFlexStart.tsx"
 
-<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexStart' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ## Flex item order
 
 ### First last ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexFirstLastOrder.tsx"
 
-<Flex className="example-border">
-  <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '2' }}>
-    Item A
-  </FlexItem>
-  <FlexItem>Item B</FlexItem>
-  <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '-1' }}>
-    Item C
-  </FlexItem>
-</Flex>;
 ```
 
 ### Responsive first last ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexResponsiveFirstLastOrder.tsx"
 
-<Flex className="example-border">
-  <FlexItem spacer={{ lg: 'spacerNone' }} order={{ lg: '2' }}>
-    Item A
-  </FlexItem>
-  <FlexItem spacer={{ md: 'spacerNone', lg: 'spacerMd' }} order={{ default: '-1', md: '1' }}>
-    Item B
-  </FlexItem>
-  <FlexItem spacer={{ default: 'spacerMd' }} order={{ md: '-1' }}>
-    Item C
-  </FlexItem>
-</Flex>;
 ```
 
 ### Ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexOrdering.tsx"
 
-<Flex className="example-border">
-  <Flex spacer={{ default: 'spacerNone' }} order={{ lg: '1' }} className="example-border">
-    <FlexItem order={{ md: '2' }}>Set 1, Item A</FlexItem>
-    <FlexItem order={{ md: '-1' }}>Set 1, Item B</FlexItem>
-    <FlexItem order={{ xl: '1' }}>Set 1, Item C</FlexItem>
-    <FlexItem spacer={{ xl: 'spacerNone' }} order={{ xl: '1' }}>
-      Set 1, Item D
-    </FlexItem>
-  </Flex>
-  <Flex spacer={{ lg: 'spacerMd' }} className="example-border">
-    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
-      Set 2, Item A
-    </FlexItem>
-    <FlexItem order={{ default: '1' }}>Set 2, Item B</FlexItem>
-    <FlexItem>Set 2, Item C</FlexItem>
-    <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
-      Set 2, Item D
-    </FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Responsive ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexResponsiveOrdering.tsx"
 
-<Flex className="example-border">
-  <Flex spacer={{ default: 'spacerNone' }} order={{ default: '1' }} className="example-border">
-    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
-      Set 1, Item A
-    </FlexItem>
-    <FlexItem order={{ default: '1' }}>Set 1, Item B</FlexItem>
-    <FlexItem>Set 1, Item C</FlexItem>
-    <FlexItem spacer={{ default: 'spacerMd' }}>Set 1, Item D</FlexItem>
-  </Flex>
-
-  <Flex spacer={{ default: 'spacerMd' }} className="example-border">
-    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
-      Set 2, Item A
-    </FlexItem>
-    <FlexItem order={{ lg: '1' }}>Set 2, Item B</FlexItem>
-    <FlexItem>Set 2, Item C</FlexItem>
-    <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
-      Set 2, Item D
-    </FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Alternative components
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlternative.tsx"
 
-<Flex component="ul">
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-</Flex>;
 ```
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlignAdjacentContent.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlignAdjacentContent.tsx
new file mode 100644
index 00000000000..e2ad1acf18d
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlignAdjacentContent.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignAdjacentContent: React.FunctionComponent = () => (
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlignRightMultipleGroups.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlignRightMultipleGroups.tsx
new file mode 100644
index 00000000000..86403b0b9d7
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlignRightMultipleGroups.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignRightMultipleGroups: React.FunctionComponent = () => (
+  <Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex align={{ default: 'alignRight' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex align={{ default: 'alignRight' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlignRightSingleItem.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlignRightSingleItem.tsx
new file mode 100644
index 00000000000..05415098e24
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlignRightSingleItem.tsx
@@ -0,0 +1,8 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignRightSingleItem: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfBaseline.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfBaseline.tsx
new file mode 100644
index 00000000000..d097113666d
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfBaseline.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfBaseline: React.FunctionComponent = () => (
+  <Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfBaseline' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfCenter.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfCenter.tsx
new file mode 100644
index 00000000000..6b4205c26e7
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfCenter.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfCenter: React.FunctionComponent = () => (
+  <Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfFlexEnd.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfFlexEnd.tsx
new file mode 100644
index 00000000000..780412005f6
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfFlexEnd.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfFlexEnd: React.FunctionComponent = () => (
+  <Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfFlexEnd' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfStretch.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfStretch.tsx
new file mode 100644
index 00000000000..35df3e9567d
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlignSelfStretch.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfStretch: React.FunctionComponent = () => (
+  <Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfStretch' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAligningRight.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAligningRight.tsx
new file mode 100644
index 00000000000..c1b3a922339
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAligningRight.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAligningRight: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAlternative.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAlternative.tsx
new file mode 100644
index 00000000000..b077ee369d0
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAlternative.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlternative: React.FunctionComponent = () => (
+  <Flex component="ul">
+    <FlexItem component="li">Flex item</FlexItem>
+    <FlexItem component="li">Flex item</FlexItem>
+    <FlexItem component="li">Flex item</FlexItem>
+    <FlexItem component="li">Flex item</FlexItem>
+    <FlexItem component="li">Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexControlTextWidth.tsx b/packages/react-core/src/layouts/Flex/examples/FlexControlTextWidth.tsx
new file mode 100644
index 00000000000..63b38b9beb1
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexControlTextWidth.tsx
@@ -0,0 +1,17 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexControlTextWidth: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column', lg: 'row' }}>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam
+        dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.
+      </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/FlexFirstLastOrder.tsx b/packages/react-core/src/layouts/Flex/examples/FlexFirstLastOrder.tsx
new file mode 100644
index 00000000000..39a301ce879
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexFirstLastOrder.tsx
@@ -0,0 +1,13 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexFirstLastOrder: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '2' }}>
+      Item A
+    </FlexItem>
+    <FlexItem>Item B</FlexItem>
+    <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '-1' }}>
+      Item C
+    </FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentEnd.tsx b/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentEnd.tsx
new file mode 100644
index 00000000000..04f2ca9db50
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentEnd.tsx
@@ -0,0 +1,10 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexJustifyContentEnd: React.FunctionComponent = () => (
+  <Flex className="example-border" justifyContent={{ default: 'justifyContentFlexEnd' }}>
+    <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/FlexJustifyContentFlexStart.tsx b/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentFlexStart.tsx
new file mode 100644
index 00000000000..0188ff9fe65
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentFlexStart.tsx
@@ -0,0 +1,9 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexJustifyContentFlexStart: React.FunctionComponent = () => (
+  <Flex className="example-border" justifyContent={{ default: 'justifyContentFlexStart' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentSpaceBetween.tsx b/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentSpaceBetween.tsx
new file mode 100644
index 00000000000..0857ab4a875
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexJustifyContentSpaceBetween.tsx
@@ -0,0 +1,9 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexJustifyContentSpaceBetween: React.FunctionComponent = () => (
+  <Flex className="example-border" justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexOrdering.tsx b/packages/react-core/src/layouts/Flex/examples/FlexOrdering.tsx
new file mode 100644
index 00000000000..4d402d4b5a0
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexOrdering.tsx
@@ -0,0 +1,24 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexOrdering: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <Flex spacer={{ default: 'spacerNone' }} order={{ lg: '1' }} className="example-border">
+      <FlexItem order={{ md: '2' }}>Set 1, Item A</FlexItem>
+      <FlexItem order={{ md: '-1' }}>Set 1, Item B</FlexItem>
+      <FlexItem order={{ xl: '1' }}>Set 1, Item C</FlexItem>
+      <FlexItem spacer={{ xl: 'spacerNone' }} order={{ xl: '1' }}>
+        Set 1, Item D
+      </FlexItem>
+    </Flex>
+    <Flex spacer={{ lg: 'spacerMd' }} className="example-border">
+      <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
+        Set 2, Item A
+      </FlexItem>
+      <FlexItem order={{ default: '1' }}>Set 2, Item B</FlexItem>
+      <FlexItem>Set 2, Item C</FlexItem>
+      <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
+        Set 2, Item D
+      </FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexResponsiveFirstLastOrder.tsx b/packages/react-core/src/layouts/Flex/examples/FlexResponsiveFirstLastOrder.tsx
new file mode 100644
index 00000000000..70e82e5a7f5
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexResponsiveFirstLastOrder.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexResponsiveFirstLastOrder: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <FlexItem spacer={{ lg: 'spacerNone' }} order={{ lg: '2' }}>
+      Item A
+    </FlexItem>
+    <FlexItem spacer={{ md: 'spacerNone', lg: 'spacerMd' }} order={{ default: '-1', md: '1' }}>
+      Item B
+    </FlexItem>
+    <FlexItem spacer={{ default: 'spacerMd' }} order={{ md: '-1' }}>
+      Item C
+    </FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexResponsiveOrdering.tsx b/packages/react-core/src/layouts/Flex/examples/FlexResponsiveOrdering.tsx
new file mode 100644
index 00000000000..51811ffe5bf
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexResponsiveOrdering.tsx
@@ -0,0 +1,25 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexResponsiveOrdering: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <Flex spacer={{ default: 'spacerNone' }} order={{ default: '1' }} className="example-border">
+      <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
+        Set 1, Item A
+      </FlexItem>
+      <FlexItem order={{ default: '1' }}>Set 1, Item B</FlexItem>
+      <FlexItem>Set 1, Item C</FlexItem>
+      <FlexItem spacer={{ default: 'spacerMd' }}>Set 1, Item D</FlexItem>
+    </Flex>
+
+    <Flex spacer={{ default: 'spacerMd' }} className="example-border">
+      <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
+        Set 2, Item A
+      </FlexItem>
+      <FlexItem order={{ lg: '1' }}>Set 2, Item B</FlexItem>
+      <FlexItem>Set 2, Item C</FlexItem>
+      <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
+        Set 2, Item D
+      </FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexSwitchingColumnRow.tsx b/packages/react-core/src/layouts/Flex/examples/FlexSwitchingColumnRow.tsx
new file mode 100644
index 00000000000..f4dcf92d98b
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexSwitchingColumnRow.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexSwitchingColumnRow: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column', lg: 'row' }}>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <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>
+);