Flex
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.
ExamplesPropsCSS VariablesExamples
Flex Basics
Flex Spacing
Flex layout modifiers
Column layout modifiers
Responsive layout modifiers
Controlling width of text
Flex item
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.
Flex item
Flex item
Flex alignment
Flex justification
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | content rendered inside the Flex layout |
| className | string | No | '' | additional classes added to the Flex layout |
| breakpointMods | FlexBreakpointMod[] | No | [] | An array of objects representing the various modifiers to apply to the flex component at various breakpoints |
CSS Variables
| .pf-l-flex | --pf-l-flex--Display | flex | ||
| .pf-l-flex | --pf-l-flex--FlexWrap | wrap | ||
| .pf-l-flex | --pf-l-flex--AlignItems | baseline | ||
| .pf-l-flex | --pf-l-flex--m-row--AlignItems | baseline | ||
| .pf-l-flex | --pf-l-flex--m-row-reverse--AlignItems | baseline | ||
| .pf-l-flex | --pf-l-flex--spacer-base | 1rem | ||
| .pf-l-flex | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex | --pf-l-flex--spacer--none | 0 | ||
| .pf-l-flex | --pf-l-flex--spacer--xs | 0.25rem | ||
| .pf-l-flex | --pf-l-flex--spacer--sm | 0.5rem | ||
| .pf-l-flex | --pf-l-flex--spacer--md | 1rem | ||
| .pf-l-flex | --pf-l-flex--spacer--lg | 1.5rem | ||
| .pf-l-flex | --pf-l-flex--spacer--xl | 2rem | ||
| .pf-l-flex | --pf-l-flex--spacer--2xl | 3rem | ||
| .pf-l-flex | --pf-l-flex--spacer--3xl | 4rem | ||
| .pf-l-flex:last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex > * | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex > *:last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-inline-flex | --pf-l-flex--Display | inline-flex | ||
| .pf-l-flex.pf-m-space-items-none > * | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-none > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-xs > * | --pf-l-flex--spacer | 0.25rem | ||
| .pf-l-flex.pf-m-space-items-xs > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-sm > * | --pf-l-flex--spacer | 0.5rem | ||
| .pf-l-flex.pf-m-space-items-sm > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-md > * | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex.pf-m-space-items-md > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-lg > * | --pf-l-flex--spacer | 1.5rem | ||
| .pf-l-flex.pf-m-space-items-lg > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-xl > * | --pf-l-flex--spacer | 2rem | ||
| .pf-l-flex.pf-m-space-items-xl > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-2xl > * | --pf-l-flex--spacer | 3rem | ||
| .pf-l-flex.pf-m-space-items-2xl > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-3xl > * | --pf-l-flex--spacer | 4rem | ||
| .pf-l-flex.pf-m-space-items-3xl > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex .pf-m-spacer-none | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex .pf-m-spacer-none:last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex .pf-m-spacer-xs | --pf-l-flex--spacer | 0.25rem | ||
| .pf-l-flex .pf-m-spacer-xs:last-child | --pf-l-flex--spacer | 0.25rem | ||
| .pf-l-flex .pf-m-spacer-sm | --pf-l-flex--spacer | 0.5rem | ||
| .pf-l-flex .pf-m-spacer-sm:last-child | --pf-l-flex--spacer | 0.5rem | ||
| .pf-l-flex .pf-m-spacer-md | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex .pf-m-spacer-md:last-child | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex .pf-m-spacer-lg | --pf-l-flex--spacer | 1.5rem | ||
| .pf-l-flex .pf-m-spacer-lg:last-child | --pf-l-flex--spacer | 1.5rem | ||
| .pf-l-flex .pf-m-spacer-xl | --pf-l-flex--spacer | 2rem | ||
| .pf-l-flex .pf-m-spacer-xl:last-child | --pf-l-flex--spacer | 2rem | ||
| .pf-l-flex .pf-m-spacer-2xl | --pf-l-flex--spacer | 3rem | ||
| .pf-l-flex .pf-m-spacer-2xl:last-child | --pf-l-flex--spacer | 3rem | ||
| .pf-l-flex .pf-m-spacer-3xl | --pf-l-flex--spacer | 4rem | ||
| .pf-l-flex .pf-m-spacer-3xl:last-child | --pf-l-flex--spacer | 4rem | ||
