docs(flex): expands design guidelines for flex layout. (#3667)

packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/flex.md

@@ -2,4 +2,35 @@
 id: Flex
 section: layouts
 ---
-The **Flex** layout is a tool to build your own custom layout that builds-in the PatternFly spacer and breakpoint systems. This enables developers to create a custom layout that can have consistent spacing and change responsively with other PatternFly layouts and components.
+
+The **flex** layout supports a completely custom layout by utilizing the PatternFly spacer and breakpoint systems. Flex layouts are infinitely nestable and allow you to adjust spacing, direction, alignment, justification, wrapping, and width to fit your needs.
+
+## Elements
+
+
+<img src="./img/flex-example.png" alt="PatternFly website screenshot showing dashboard created with flex layout." width="3330px"/>
+
+1. **Flex:** The flex container, which contains all flex items.
+1. **Flex item:** An individual section of content to be placed in the flex container. 
+
+## Usage
+
+Flex layouts can be combined with other layouts to create versatile UIs. 
+
+For example, our [dashboard pattern](/patterns/dashboard) combines the grid layout with flex to improve the responsiveness of information. Similarly, our [primary-detail pattern](/patterns/primary-detail/react-demos/primary-detail-full-page/) combines the stack layout with flex to ensure that icons and buttons are responsive to changes in screen size. 
+
+### When to use the flex layout
+
+Use the flex layout with content heavy UIs and when it is necessary to wrap UI elements.
+
+### When to use the flex layout vs the grid layout
+
+Use the flex layout when a rigid grid is not necessary or wanted. If you need a more structured layout, consider using a the [grid layout](/layouts/grid).
+
+## Variations
+
+The flex layout is based on the [CSS "flex" properties](https://www.w3schools.com/cssref/css3_pr_flex.php), which help determine how a flex item will grow or shrink to fit a containers available space. These properties allow for variation in the implementation and appearance of flex layouts. 
+
+Most of the flex layout variations are available at our standard [breakpoints](/developer-resources/global-css-variables). In the future, we plan to apply these modifiers via [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). 
+
+