@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/foundations-and-styles/layouts/flex/react.js

@@ -0,0 +1,506 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../../react-core/src/layouts/Flex/examples/./flex.css';
+const pageData = {
+  "id": "Flex",
+  "section": "foundations-and-styles",
+  "subsection": "layouts",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/foundations-and-styles/layouts/flex/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/layouts/Flex/examples/Flex.md",
+  "relPath": "packages/react-core/src/layouts/Flex/examples/Flex.md",
+  "propComponents": [
+    {
+      "name": "Flex",
+      "description": "",
+      "props": [
+        {
+          "name": "align",
+          "type": "{\n  default?: 'alignLeft' | 'alignRight';\n  sm?: 'alignLeft' | 'alignRight';\n  md?: 'alignLeft' | 'alignRight';\n  lg?: 'alignLeft' | 'alignRight';\n  xl?: 'alignLeft' | 'alignRight';\n  '2xl'?: 'alignLeft' | 'alignRight';\n}",
+          "description": "Value to use for margin: auto at various breakpoints"
+        },
+        {
+          "name": "alignContent",
+          "type": "{\n  default?:\n    | 'alignContentFlexStart'\n    | 'alignContentFlexEnd'\n    | 'alignContentCenter'\n    | 'alignContentStretch'\n    | 'alignContentSpaceBetween'\n    | 'alignContentSpaceAround';\n  sm?:\n    | 'alignContentFlexStart'\n    | 'alignContentFlexEnd'\n    | 'alignContentCenter'\n    | 'alignContentStretch'\n    | 'alignContentSpaceBetween'\n    | 'alignContentSpaceAround';\n  md?:\n    | 'alignContentFlexStart'\n    | 'alignContentFlexEnd'\n    | 'alignContentCenter'\n    | 'alignContentStretch'\n    | 'alignContentSpaceBetween'\n    | 'alignContentSpaceAround';\n  lg?:\n    | 'alignContentFlexStart'\n    | 'alignContentFlexEnd'\n    | 'alignContentCenter'\n    | 'alignContentStretch'\n    | 'alignContentSpaceBetween'\n    | 'alignContentSpaceAround';\n  xl?:\n    | 'alignContentFlexStart'\n    | 'alignContentFlexEnd'\n    | 'alignContentCenter'\n    | 'alignContentStretch'\n    | 'alignContentSpaceBetween'\n    | 'alignContentSpaceAround';\n  '2xl'?:\n    | 'alignContentFlexStart'\n    | 'alignContentFlexEnd'\n    | 'alignContentCenter'\n    | 'alignContentStretch'\n    | 'alignContentSpaceBetween'\n    | 'alignContentSpaceAround';\n}",
+          "description": "Value to add for align-content property at various breakpoints"
+        },
+        {
+          "name": "alignItems",
+          "type": "{\n  default?:\n    | 'alignItemsFlexStart'\n    | 'alignItemsFlexEnd'\n    | 'alignItemsCenter'\n    | 'alignItemsStretch'\n    | 'alignItemsBaseline';\n  sm?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline';\n  md?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline';\n  lg?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline';\n  xl?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline';\n  '2xl'?:\n    | 'alignItemsFlexStart'\n    | 'alignItemsFlexEnd'\n    | 'alignItemsCenter'\n    | 'alignItemsStretch'\n    | 'alignItemsBaseline';\n}",
+          "description": "Value to add for align-items property at various breakpoints"
+        },
+        {
+          "name": "alignSelf",
+          "type": "{\n  default?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  sm?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  md?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  lg?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  xl?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  '2xl'?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n}",
+          "description": "Value to add for align-self property at various breakpoints"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "content rendered inside the Flex layout",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the Flex layout",
+          "defaultValue": "''"
+        },
+        {
+          "name": "columnGap",
+          "type": "{\n  default?:\n    | 'columnGap'\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap2xl'\n    | 'columnGap3xl'\n    | 'columnGap4xl';\n  sm?:\n    | 'columnGap'\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap2xl'\n    | 'columnGap3xl'\n    | 'columnGap4xl';\n  md?:\n    | 'columnGap'\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap2xl'\n    | 'columnGap3xl'\n    | 'columnGap4xl';\n  lg?:\n    | 'columnGap'\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap2xl'\n    | 'columnGap3xl'\n    | 'columnGap4xl';\n  xl?:\n    | 'columnGap'\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap2xl'\n    | 'columnGap3xl'\n    | 'columnGap4xl';\n  '2xl'?:\n    | 'columnGap'\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap2xl'\n    | 'columnGap3xl'\n    | 'columnGap4xl';\n}",
+          "description": "Gap beween columns at various breakpoints. This will override spacers for the main axis."
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Sets the base component to render. defaults to div",
+          "defaultValue": "'div'"
+        },
+        {
+          "name": "direction",
+          "type": "{\n  default?: 'column' | 'columnReverse' | 'row' | 'rowReverse';\n  sm?: 'column' | 'columnReverse' | 'row' | 'rowReverse';\n  md?: 'column' | 'columnReverse' | 'row' | 'rowReverse';\n  lg?: 'column' | 'columnReverse' | 'row' | 'rowReverse';\n  xl?: 'column' | 'columnReverse' | 'row' | 'rowReverse';\n  '2xl'?: 'column' | 'columnReverse' | 'row' | 'rowReverse';\n}",
+          "description": "Value to add for flex-direction property at various breakpoints"
+        },
+        {
+          "name": "display",
+          "type": "{\n  default?: 'inlineFlex';\n  sm?: 'flex' | 'inlineFlex';\n  md?: 'flex' | 'inlineFlex';\n  lg?: 'flex' | 'inlineFlex';\n  xl?: 'flex' | 'inlineFlex';\n  '2xl'?: 'flex' | 'inlineFlex';\n}",
+          "description": "Value to set to display property at various breakpoints"
+        },
+        {
+          "name": "flex",
+          "type": "{\n  default?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  sm?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  md?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  lg?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  xl?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  '2xl'?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n}",
+          "description": "Value to add for flex property at various breakpoints"
+        },
+        {
+          "name": "flexWrap",
+          "type": "{\n  default?: 'wrap' | 'wrapReverse' | 'nowrap';\n  sm?: 'wrap' | 'wrapReverse' | 'nowrap';\n  md?: 'wrap' | 'wrapReverse' | 'nowrap';\n  lg?: 'wrap' | 'wrapReverse' | 'nowrap';\n  xl?: 'wrap' | 'wrapReverse' | 'nowrap';\n  '2xl'?: 'wrap' | 'wrapReverse' | 'nowrap';\n}",
+          "description": "Value to set for flex-wrap property at various breakpoints"
+        },
+        {
+          "name": "fullWidth",
+          "type": "{\n  default?: 'fullWidth';\n  sm?: 'fullWidth';\n  md?: 'fullWidth';\n  lg?: 'fullWidth';\n  xl?: 'fullWidth';\n  '2xl'?: 'fullWidth';\n}",
+          "description": "Whether to set width: 100% at various breakpoints"
+        },
+        {
+          "name": "gap",
+          "type": "{\n  default?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';\n  sm?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';\n  md?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';\n  lg?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';\n  xl?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';\n  '2xl'?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';\n}",
+          "description": "Gap between items at various breakpoints. This will override spacers for the main axis."
+        },
+        {
+          "name": "grow",
+          "type": "{\n  default?: 'grow';\n  sm?: 'grow';\n  md?: 'grow';\n  lg?: 'grow';\n  xl?: 'grow';\n  '2xl'?: 'grow';\n}",
+          "description": "Whether to add flex: grow at various breakpoints"
+        },
+        {
+          "name": "justifyContent",
+          "type": "{\n  default?:\n    | 'justifyContentFlexStart'\n    | 'justifyContentFlexEnd'\n    | 'justifyContentCenter'\n    | 'justifyContentSpaceBetween'\n    | 'justifyContentSpaceAround'\n    | 'justifyContentSpaceEvenly';\n  sm?:\n    | 'justifyContentFlexStart'\n    | 'justifyContentFlexEnd'\n    | 'justifyContentCenter'\n    | 'justifyContentSpaceBetween'\n    | 'justifyContentSpaceAround'\n    | 'justifyContentSpaceEvenly';\n  md?:\n    | 'justifyContentFlexStart'\n    | 'justifyContentFlexEnd'\n    | 'justifyContentCenter'\n    | 'justifyContentSpaceBetween'\n    | 'justifyContentSpaceAround'\n    | 'justifyContentSpaceEvenly';\n  lg?:\n    | 'justifyContentFlexStart'\n    | 'justifyContentFlexEnd'\n    | 'justifyContentCenter'\n    | 'justifyContentSpaceBetween'\n    | 'justifyContentSpaceAround'\n    | 'justifyContentSpaceEvenly';\n  xl?:\n    | 'justifyContentFlexStart'\n    | 'justifyContentFlexEnd'\n    | 'justifyContentCenter'\n    | 'justifyContentSpaceBetween'\n    | 'justifyContentSpaceAround'\n    | 'justifyContentSpaceEvenly';\n  '2xl'?:\n    | 'justifyContentFlexStart'\n    | 'justifyContentFlexEnd'\n    | 'justifyContentCenter'\n    | 'justifyContentSpaceBetween'\n    | 'justifyContentSpaceAround'\n    | 'justifyContentSpaceEvenly';\n}",
+          "description": "Value to add for justify-content property at various breakpoints"
+        },
+        {
+          "name": "order",
+          "type": "{\n  default?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n}",
+          "description": "Modifies the flex layout element order property"
+        },
+        {
+          "name": "rowGap",
+          "type": "{\n  default?:\n    | 'rowGap'\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap2xl'\n    | 'rowGap3xl'\n    | 'rowGap4xl';\n  sm?:\n    | 'rowGap'\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap2xl'\n    | 'rowGap3xl'\n    | 'rowGap4xl';\n  md?:\n    | 'rowGap'\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap2xl'\n    | 'rowGap3xl'\n    | 'rowGap4xl';\n  lg?:\n    | 'rowGap'\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap2xl'\n    | 'rowGap3xl'\n    | 'rowGap4xl';\n  xl?:\n    | 'rowGap'\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap2xl'\n    | 'rowGap3xl'\n    | 'rowGap4xl';\n  '2xl'?:\n    | 'rowGap'\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap2xl'\n    | 'rowGap3xl'\n    | 'rowGap4xl';\n}",
+          "description": "Gap between rows at various breakpoints. This will override spacers for the main axis."
+        },
+        {
+          "name": "shrink",
+          "type": "{\n  default?: 'shrink';\n  sm?: 'shrink';\n  md?: 'shrink';\n  lg?: 'shrink';\n  xl?: 'shrink';\n  '2xl'?: 'shrink';\n}",
+          "description": "Whether to add flex: shrink at various breakpoints"
+        },
+        {
+          "name": "spaceItems",
+          "type": "{\n  default?:\n    | 'spaceItemsNone'\n    | 'spaceItemsXs'\n    | 'spaceItemsSm'\n    | 'spaceItemsMd'\n    | 'spaceItemsLg'\n    | 'spaceItemsXl'\n    | 'spaceItems2xl'\n    | 'spaceItems3xl'\n    | 'spaceItems4xl';\n  sm?:\n    | 'spaceItemsNone'\n    | 'spaceItemsXs'\n    | 'spaceItemsSm'\n    | 'spaceItemsMd'\n    | 'spaceItemsLg'\n    | 'spaceItemsXl'\n    | 'spaceItems2xl'\n    | 'spaceItems3xl'\n    | 'spaceItems4xl';\n  md?:\n    | 'spaceItemsNone'\n    | 'spaceItemsXs'\n    | 'spaceItemsSm'\n    | 'spaceItemsMd'\n    | 'spaceItemsLg'\n    | 'spaceItemsXl'\n    | 'spaceItems2xl'\n    | 'spaceItems3xl'\n    | 'spaceItems4xl';\n  lg?:\n    | 'spaceItemsNone'\n    | 'spaceItemsXs'\n    | 'spaceItemsSm'\n    | 'spaceItemsMd'\n    | 'spaceItemsLg'\n    | 'spaceItemsXl'\n    | 'spaceItems2xl'\n    | 'spaceItems3xl'\n    | 'spaceItems4xl';\n  xl?:\n    | 'spaceItemsNone'\n    | 'spaceItemsXs'\n    | 'spaceItemsSm'\n    | 'spaceItemsMd'\n    | 'spaceItemsLg'\n    | 'spaceItemsXl'\n    | 'spaceItems2xl'\n    | 'spaceItems3xl'\n    | 'spaceItems4xl';\n  '2xl'?:\n    | 'spaceItemsNone'\n    | 'spaceItemsXs'\n    | 'spaceItemsSm'\n    | 'spaceItemsMd'\n    | 'spaceItemsLg'\n    | 'spaceItemsXl'\n    | 'spaceItems2xl'\n    | 'spaceItems3xl'\n    | 'spaceItems4xl';\n}",
+          "description": "Space items at various breakpoints"
+        },
+        {
+          "name": "spacer",
+          "type": "{\n  default?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  sm?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  md?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  lg?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  xl?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  '2xl'?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n}",
+          "description": "Spacers at various breakpoints"
+        }
+      ]
+    },
+    {
+      "name": "FlexItem",
+      "description": "",
+      "props": [
+        {
+          "name": "align",
+          "type": "{\n  default?: 'alignLeft' | 'alignRight';\n  sm?: 'alignLeft' | 'alignRight';\n  md?: 'alignLeft' | 'alignRight';\n  lg?: 'alignLeft' | 'alignRight';\n  xl?: 'alignLeft' | 'alignRight';\n  '2xl'?: 'alignLeft' | 'alignRight';\n}",
+          "description": "Value to use for margin: auto at various breakpoints"
+        },
+        {
+          "name": "alignSelf",
+          "type": "{\n  default?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  sm?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  md?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  lg?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  xl?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n  '2xl'?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';\n}",
+          "description": "Value to add for align-self property at various breakpoints"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "content rendered inside the Flex layout",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the Flex layout",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Sets the base component to render. defaults to div",
+          "defaultValue": "'div'"
+        },
+        {
+          "name": "flex",
+          "type": "{\n  default?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  sm?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  md?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  lg?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  xl?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n  '2xl'?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';\n}",
+          "description": "Value to add for flex property at various breakpoints"
+        },
+        {
+          "name": "fullWidth",
+          "type": "{\n  default?: 'fullWidth';\n  sm?: 'fullWidth';\n  md?: 'fullWidth';\n  lg?: 'fullWidth';\n  xl?: 'fullWidth';\n  '2xl'?: 'fullWidth';\n}",
+          "description": "Whether to set width: 100% at various breakpoints"
+        },
+        {
+          "name": "grow",
+          "type": "{\n  default?: 'grow';\n  sm?: 'grow';\n  md?: 'grow';\n  lg?: 'grow';\n  xl?: 'grow';\n  '2xl'?: 'grow';\n}",
+          "description": "Whether to add flex: grow at various breakpoints"
+        },
+        {
+          "name": "order",
+          "type": "{\n  default?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n}",
+          "description": "Modifies the flex layout element order property"
+        },
+        {
+          "name": "shrink",
+          "type": "{\n  default?: 'shrink';\n  sm?: 'shrink';\n  md?: 'shrink';\n  lg?: 'shrink';\n  xl?: 'shrink';\n  '2xl'?: 'shrink';\n}",
+          "description": "Whether to add flex: shrink at various breakpoints"
+        },
+        {
+          "name": "spacer",
+          "type": "{\n  default?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  sm?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  md?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  lg?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  xl?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n  '2xl'?:\n    | 'spacerNone'\n    | 'spacerXs'\n    | 'spacerSm'\n    | 'spacerMd'\n    | 'spacerLg'\n    | 'spacerXl'\n    | 'spacer2xl'\n    | 'spacer3xl'\n    | 'spacer4xl';\n}",
+          "description": "Spacers at various breakpoints"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-l-flex"
+  ],
+  "examples": [
+    "Basic",
+    "Nesting",
+    "Nested with items",
+    "Individually spaced",
+    "Spacing xl",
+    "Spacing none",
+    "Row gap",
+    "Column gap",
+    "Gap",
+    "Default layout",
+    "Inline",
+    "Using canGrow",
+    "Adjusting width",
+    "Specifying column widths",
+    "Column layout",
+    "Stacking elements",
+    "Nesting elements in columns",
+    "Switching between direction column and row",
+    "Controlling width of text",
+    "Aligning right",
+    "Align right on single item",
+    "Align right on multiple groups",
+    "Align adjacent content",
+    "Align self flex end",
+    "Align self center",
+    "Align self baseline",
+    "Align self stretch",
+    "Justify content flex end",
+    "Justify content space between",
+    "Justify content flex start",
+    "First last ordering",
+    "Responsive first last ordering",
+    "Ordering",
+    "Responsive ordering",
+    "Alternative components"
+  ]
+};
+pageData.relativeImports = "import 'react-core/src/layouts/Flex/examples/./flex.css';"
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexBasic: React.FunctionComponent = () => (\n  <Flex>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Nesting': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexNesting: React.FunctionComponent = () => (\n  <Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Nesting","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Nested with items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexNestedItems: React.FunctionComponent = () => (\n  <Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Nested with items","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Individually spaced': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexIndividuallySpaced: React.FunctionComponent = () => (\n  <Flex>\n    <FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>\n    <FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>\n    <FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>\n    <FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>\n    <FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>\n    <FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>\n    <FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>\n    <FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>\n  </Flex>\n);\n","title":"Individually spaced","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Spacing xl': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexSpacingXl: React.FunctionComponent = () => (\n  <Flex spaceItems={{ default: 'spaceItemsXl' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Spacing xl","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Spacing none': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexSpacingNone: React.FunctionComponent = () => (\n  <Flex spaceItems={{ default: 'spaceItemsNone' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Spacing none","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Row gap': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexRowGap: React.FunctionComponent = () => (\n  <Flex rowGap={{ default: 'rowGap2xl' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Row gap","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Column gap': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexColumnGap: React.FunctionComponent = () => (\n  <Flex columnGap={{ default: 'columnGap2xl' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Column gap","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Gap': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexGap: React.FunctionComponent = () => (\n  <Flex gap={{ default: 'gap2xl' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Gap","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Default layout': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexDefaultLayout: React.FunctionComponent = () => (\n  <Flex className=\"example-border\">\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Default layout","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexInline: React.FunctionComponent = () => (\n  <Flex className=\"example-border\" display={{ default: 'inlineFlex' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Inline","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Using canGrow': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexCanGrow: React.FunctionComponent = () => (\n  <Flex>\n    <Flex grow={{ default: 'grow' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Using canGrow","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Adjusting width': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAdjustingWidth: React.FunctionComponent = () => (\n  <Flex>\n    <Flex flex={{ default: 'flex_1' }}>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex flex={{ default: 'flex_1' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex flex={{ default: 'flex_1' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Adjusting width","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Specifying column widths': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexColumnWidths: React.FunctionComponent = () => (\n  <Flex>\n    <Flex flex={{ default: 'flex_1' }}>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex flex={{ default: 'flex_2' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex flex={{ default: 'flex_3' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Specifying column widths","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Column layout': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexColumnLayout: React.FunctionComponent = () => (\n  <Flex direction={{ default: 'column' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Column layout","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Stacking elements': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexStackingElements: React.FunctionComponent = () => (\n  <Flex direction={{ default: 'column' }}>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Stacking elements","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Nesting elements in columns': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexNestingInColumns: React.FunctionComponent = () => (\n  <Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Nesting elements in columns","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Switching between direction column and row': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexSwitchingColumnRow: React.FunctionComponent = () => (\n  <Flex direction={{ default: 'column', lg: 'row' }}>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Switching between direction column and row","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Controlling width of text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexControlTextWidth: React.FunctionComponent = () => (\n  <Flex direction={{ default: 'column', lg: 'row' }}>\n    <Flex flex={{ default: 'flex_1' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam\n        dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.\n      </FlexItem>\n    </Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Controlling width of text","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Aligning right': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAligningRight: React.FunctionComponent = () => (\n  <Flex className=\"example-border\">\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Aligning right","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Align right on single item': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlignRightSingleItem: React.FunctionComponent = () => (\n  <Flex className=\"example-border\">\n    <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Align right on single item","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Align right on multiple groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlignRightMultipleGroups: React.FunctionComponent = () => (\n  <Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex align={{ default: 'alignRight' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex align={{ default: 'alignRight' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Align right on multiple groups","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Align adjacent content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlignAdjacentContent: React.FunctionComponent = () => (\n  <Flex>\n    <Flex flex={{ default: 'flex_1' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Align adjacent content","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Align self flex end': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlignSelfFlexEnd: React.FunctionComponent = () => (\n  <Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfFlexEnd' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Align self flex end","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Align self center': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlignSelfCenter: React.FunctionComponent = () => (\n  <Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Align self center","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Align self baseline': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlignSelfBaseline: React.FunctionComponent = () => (\n  <Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfBaseline' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Align self baseline","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Align self stretch': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlignSelfStretch: React.FunctionComponent = () => (\n  <Flex>\n    <Flex direction={{ default: 'column' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n    <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfStretch' }}>\n      <FlexItem>Flex item</FlexItem>\n      <FlexItem>Flex item</FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Align self stretch","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Justify content flex end': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexJustifyContentEnd: React.FunctionComponent = () => (\n  <Flex className=\"example-border\" justifyContent={{ default: 'justifyContentFlexEnd' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Justify content flex end","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Justify content space between': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexJustifyContentSpaceBetween: React.FunctionComponent = () => (\n  <Flex className=\"example-border\" justifyContent={{ default: 'justifyContentSpaceBetween' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Justify content space between","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Justify content flex start': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexJustifyContentFlexStart: React.FunctionComponent = () => (\n  <Flex className=\"example-border\" justifyContent={{ default: 'justifyContentFlexStart' }}>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n    <FlexItem>Flex item</FlexItem>\n  </Flex>\n);\n","title":"Justify content flex start","lang":"ts","className":""}}>
+      
+    </Example>,
+  'First last ordering': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexFirstLastOrder: React.FunctionComponent = () => (\n  <Flex className=\"example-border\">\n    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '2' }}>\n      Item A\n    </FlexItem>\n    <FlexItem>Item B</FlexItem>\n    <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '-1' }}>\n      Item C\n    </FlexItem>\n  </Flex>\n);\n","title":"First last ordering","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Responsive first last ordering': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexResponsiveFirstLastOrder: React.FunctionComponent = () => (\n  <Flex className=\"example-border\">\n    <FlexItem spacer={{ lg: 'spacerNone' }} order={{ lg: '2' }}>\n      Item A\n    </FlexItem>\n    <FlexItem spacer={{ md: 'spacerNone', lg: 'spacerMd' }} order={{ default: '-1', md: '1' }}>\n      Item B\n    </FlexItem>\n    <FlexItem spacer={{ default: 'spacerMd' }} order={{ md: '-1' }}>\n      Item C\n    </FlexItem>\n  </Flex>\n);\n","title":"Responsive first last ordering","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Ordering': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexOrdering: React.FunctionComponent = () => (\n  <Flex className=\"example-border\">\n    <Flex spacer={{ default: 'spacerNone' }} order={{ lg: '1' }} className=\"example-border\">\n      <FlexItem order={{ md: '2' }}>Set 1, Item A</FlexItem>\n      <FlexItem order={{ md: '-1' }}>Set 1, Item B</FlexItem>\n      <FlexItem order={{ xl: '1' }}>Set 1, Item C</FlexItem>\n      <FlexItem spacer={{ xl: 'spacerNone' }} order={{ xl: '1' }}>\n        Set 1, Item D\n      </FlexItem>\n    </Flex>\n    <Flex spacer={{ lg: 'spacerMd' }} className=\"example-border\">\n      <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>\n        Set 2, Item A\n      </FlexItem>\n      <FlexItem order={{ default: '1' }}>Set 2, Item B</FlexItem>\n      <FlexItem>Set 2, Item C</FlexItem>\n      <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>\n        Set 2, Item D\n      </FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Ordering","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Responsive ordering': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexResponsiveOrdering: React.FunctionComponent = () => (\n  <Flex className=\"example-border\">\n    <Flex spacer={{ default: 'spacerNone' }} order={{ default: '1' }} className=\"example-border\">\n      <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>\n        Set 1, Item A\n      </FlexItem>\n      <FlexItem order={{ default: '1' }}>Set 1, Item B</FlexItem>\n      <FlexItem>Set 1, Item C</FlexItem>\n      <FlexItem spacer={{ default: 'spacerMd' }}>Set 1, Item D</FlexItem>\n    </Flex>\n\n    <Flex spacer={{ default: 'spacerMd' }} className=\"example-border\">\n      <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>\n        Set 2, Item A\n      </FlexItem>\n      <FlexItem order={{ lg: '1' }}>Set 2, Item B</FlexItem>\n      <FlexItem>Set 2, Item C</FlexItem>\n      <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>\n        Set 2, Item D\n      </FlexItem>\n    </Flex>\n  </Flex>\n);\n","title":"Responsive ordering","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Alternative components': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex, FlexItem } from '@patternfly/react-core';\n\nexport const FlexAlternative: React.FunctionComponent = () => (\n  <Flex component=\"ul\">\n    <FlexItem component=\"li\">Flex item</FlexItem>\n    <FlexItem component=\"li\">Flex item</FlexItem>\n    <FlexItem component=\"li\">Flex item</FlexItem>\n    <FlexItem component=\"li\">Flex item</FlexItem>\n    <FlexItem component=\"li\">Flex item</FlexItem>\n  </Flex>\n);\n","title":"Alternative components","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"flex-basics","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Flex basics`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Nesting"])}
+    {React.createElement(pageData.examples["Nested with items"])}
+    <AutoLinkHeader {...{"id":"spacing","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Spacing`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`The flex layout provides two ways of spacing its direct children.`}
+    </p>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"#flex-spacing","className":""}}>
+          {`Spacing system`}
+        </PatternflyThemeLink>
+        <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+          <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+            {`The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.`}
+          </li>
+        </ul>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"#flex-gap-spacing","className":""}}>
+          {`Gap spacing`}
+        </PatternflyThemeLink>
+        <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+          <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+            {`Gap spacing uses flex `}
+            <code {...{"className":"ws-code "}}>
+              {`gap`}
+            </code>
+            {` to space the flex layout's direct children, and can be applied to space rows (`}
+            <code {...{"className":"ws-code "}}>
+              {`row-gap`}
+            </code>
+            {`), columns (`}
+            <code {...{"className":"ws-code "}}>
+              {`column-gap`}
+            </code>
+            {`), or both (`}
+            <code {...{"className":"ws-code "}}>
+              {`gap`}
+            </code>
+            {`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.`}
+          </li>
+          <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+            <strong {...{"className":""}}>
+              {`Note`}
+            </strong>
+            {` using `}
+            <code {...{"className":"ws-code "}}>
+              {`gap`}
+            </code>
+            {` along the main axis will override any other spacing applied using the spacing system.`}
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <AutoLinkHeader {...{"id":"flex-spacing","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Flex spacing`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Individually spaced"])}
+    {React.createElement(pageData.examples["Spacing xl"])}
+    {React.createElement(pageData.examples["Spacing none"])}
+    <AutoLinkHeader {...{"id":"flex-gap-spacing","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Flex gap spacing`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Row gap"])}
+    {React.createElement(pageData.examples["Column gap"])}
+    {React.createElement(pageData.examples["Gap"])}
+    <AutoLinkHeader {...{"id":"flex-layout-modifiers","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Flex layout modifiers`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default layout"])}
+    {React.createElement(pageData.examples["Inline"])}
+    {React.createElement(pageData.examples["Using canGrow"])}
+    {React.createElement(pageData.examples["Adjusting width"])}
+    {React.createElement(pageData.examples["Specifying column widths"])}
+    <AutoLinkHeader {...{"id":"column-layout-modifiers","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Column layout modifiers`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Column layout"])}
+    {React.createElement(pageData.examples["Stacking elements"])}
+    {React.createElement(pageData.examples["Nesting elements in columns"])}
+    <AutoLinkHeader {...{"id":"responsive-layout-modifiers","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Responsive layout modifiers`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Switching between direction column and row"])}
+    {React.createElement(pageData.examples["Controlling width of text"])}
+    <AutoLinkHeader {...{"id":"flex-alignment","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Flex alignment`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Aligning right"])}
+    {React.createElement(pageData.examples["Align right on single item"])}
+    {React.createElement(pageData.examples["Align right on multiple groups"])}
+    {React.createElement(pageData.examples["Align adjacent content"])}
+    {React.createElement(pageData.examples["Align self flex end"])}
+    {React.createElement(pageData.examples["Align self center"])}
+    {React.createElement(pageData.examples["Align self baseline"])}
+    {React.createElement(pageData.examples["Align self stretch"])}
+    <AutoLinkHeader {...{"id":"flex-justification","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Flex justification`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Justify content flex end"])}
+    {React.createElement(pageData.examples["Justify content space between"])}
+    {React.createElement(pageData.examples["Justify content flex start"])}
+    <AutoLinkHeader {...{"id":"flex-item-order","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Flex item order`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["First last ordering"])}
+    {React.createElement(pageData.examples["Responsive first last ordering"])}
+    {React.createElement(pageData.examples["Ordering"])}
+    {React.createElement(pageData.examples["Responsive ordering"])}
+    {React.createElement(pageData.examples["Alternative components"])}
+  </React.Fragment>
+);
+Component.displayName = 'FoundationsAndStylesLayoutsFlexReactDocs';
+Component.pageData = pageData;
+
+export default Component;