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
Flex item order
Ordering
Set 1, Item A
Set 1, Item B
Set 1, Item C
Set 1, Item D
Set 2, Item A
Set 2, Item B
Set 2, Item C
Set 2, Item D
Responsive ordering
Set 1, Item A
Set 1, Item B
Set 1, Item C
Set 1, Item D
Set 2, Item A
Set 2, Item B
Set 2, Item C
Set 2, Item D
Props
Flex
| Name | Type | Default | Description |
|---|---|---|---|
| align | { default?: 'alignLeft' | 'alignRight'; sm?: 'alignLeft' | 'alignRight'; md?: 'alignLeft' | 'alignRight'; lg?: 'alignLeft' | 'alignRight'; xl?: 'alignLeft' | 'alignRight'; '2xl'?: 'alignLeft' | 'alignRight'; } | Value to use for margin: auto at various breakpoints | |
| alignContent | { default?: | 'alignContentFlexStart' | 'alignContentFlexEnd' | 'alignContentCenter' | 'alignContentStretch' | 'alignContentSpaceBetween' | 'alignContentSpaceAround'; sm?: | 'alignContentFlexStart' | 'alignContentFlexEnd' | 'alignContentCenter' | 'alignContentStretch' | 'alignContentSpaceBetween' | 'alignContentSpaceAround'; md?: | 'alignContentFlexStart' | 'alignContentFlexEnd' | 'alignContentCenter' | 'alignContentStretch' | 'alignContentSpaceBetween' | 'alignContentSpaceAround'; lg?: | 'alignContentFlexStart' | 'alignContentFlexEnd' | 'alignContentCenter' | 'alignContentStretch' | 'alignContentSpaceBetween' | 'alignContentSpaceAround'; xl?: | 'alignContentFlexStart' | 'alignContentFlexEnd' | 'alignContentCenter' | 'alignContentStretch' | 'alignContentSpaceBetween' | 'alignContentSpaceAround'; '2xl'?: | 'alignContentFlexStart' | 'alignContentFlexEnd' | 'alignContentCenter' | 'alignContentStretch' | 'alignContentSpaceBetween' | 'alignContentSpaceAround'; } | Value to add for align-content property at various breakpoints | |
| alignItems | { default?: | 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline'; sm?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline'; md?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline'; lg?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline'; xl?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline'; '2xl'?: | 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline'; } | Value to add for align-items property at various breakpoints | |
| alignSelf | { default?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; sm?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; md?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; lg?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; xl?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; '2xl'?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; } | Value to add for align-self property at various breakpoints | |
| children | React.ReactNode | null | content rendered inside the Flex layout |
| className | string | '' | additional classes added to the Flex layout |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | Sets the base component to render. defaults to div |
| direction | { default?: 'column' | 'columnReverse' | 'row' | 'rowReverse'; sm?: 'column' | 'columnReverse' | 'row' | 'rowReverse'; md?: 'column' | 'columnReverse' | 'row' | 'rowReverse'; lg?: 'column' | 'columnReverse' | 'row' | 'rowReverse'; xl?: 'column' | 'columnReverse' | 'row' | 'rowReverse'; '2xl'?: 'column' | 'columnReverse' | 'row' | 'rowReverse'; } | Value to add for flex-direction property at various breakpoints | |
| display | { default?: 'inlineFlex'; sm?: 'flex' | 'inlineFlex'; md?: 'flex' | 'inlineFlex'; lg?: 'flex' | 'inlineFlex'; xl?: 'flex' | 'inlineFlex'; '2xl'?: 'flex' | 'inlineFlex'; } | Value to set to display property at various breakpoints | |
| flex | { default?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; sm?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; md?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; lg?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; xl?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; '2xl'?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; } | Value to add for flex property at various breakpoints | |
| flexWrap | { default?: 'wrap' | 'wrapReverse' | 'nowrap'; sm?: 'wrap' | 'wrapReverse' | 'nowrap'; md?: 'wrap' | 'wrapReverse' | 'nowrap'; lg?: 'wrap' | 'wrapReverse' | 'nowrap'; xl?: 'wrap' | 'wrapReverse' | 'nowrap'; '2xl'?: 'wrap' | 'wrapReverse' | 'nowrap'; } | Value to set for flex-wrap property at various breakpoints | |
| fullWidth | { default?: 'fullWidth'; sm?: 'fullWidth'; md?: 'fullWidth'; lg?: 'fullWidth'; xl?: 'fullWidth'; '2xl'?: 'fullWidth'; } | Whether to set width: 100% at various breakpoints | |
| grow | { default?: 'grow'; sm?: 'grow'; md?: 'grow'; lg?: 'grow'; xl?: 'grow'; '2xl'?: 'grow'; } | Whether to add flex: grow at various breakpoints | |
| justifyContent | { default?: | 'justifyContentFlexStart' | 'justifyContentFlexEnd' | 'justifyContentCenter' | 'justifyContentSpaceBetween' | 'justifyContentSpaceAround' | 'justifyContentSpaceEvenly'; sm?: | 'justifyContentFlexStart' | 'justifyContentFlexEnd' | 'justifyContentCenter' | 'justifyContentSpaceBetween' | 'justifyContentSpaceAround' | 'justifyContentSpaceEvenly'; md?: | 'justifyContentFlexStart' | 'justifyContentFlexEnd' | 'justifyContentCenter' | 'justifyContentSpaceBetween' | 'justifyContentSpaceAround' | 'justifyContentSpaceEvenly'; lg?: | 'justifyContentFlexStart' | 'justifyContentFlexEnd' | 'justifyContentCenter' | 'justifyContentSpaceBetween' | 'justifyContentSpaceAround' | 'justifyContentSpaceEvenly'; xl?: | 'justifyContentFlexStart' | 'justifyContentFlexEnd' | 'justifyContentCenter' | 'justifyContentSpaceBetween' | 'justifyContentSpaceAround' | 'justifyContentSpaceEvenly'; '2xl'?: | 'justifyContentFlexStart' | 'justifyContentFlexEnd' | 'justifyContentCenter' | 'justifyContentSpaceBetween' | 'justifyContentSpaceAround' | 'justifyContentSpaceEvenly'; } | Value to add for justify-content property at various breakpoints | |
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; } | Modifies the flex layout element order property | |
| shrink | { default?: 'shrink'; sm?: 'shrink'; md?: 'shrink'; lg?: 'shrink'; xl?: 'shrink'; '2xl'?: 'shrink'; } | Whether to add flex: shrink at various breakpoints | |
| spaceItems | { default?: | 'spaceItemsNone' | 'spaceItemsXs' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg' | 'spaceItemsXl' | 'spaceItems2xl' | 'spaceItems3xl' | 'spaceItems4xl'; sm?: | 'spaceItemsNone' | 'spaceItemsXs' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg' | 'spaceItemsXl' | 'spaceItems2xl' | 'spaceItems3xl' | 'spaceItems4xl'; md?: | 'spaceItemsNone' | 'spaceItemsXs' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg' | 'spaceItemsXl' | 'spaceItems2xl' | 'spaceItems3xl' | 'spaceItems4xl'; lg?: | 'spaceItemsNone' | 'spaceItemsXs' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg' | 'spaceItemsXl' | 'spaceItems2xl' | 'spaceItems3xl' | 'spaceItems4xl'; xl?: | 'spaceItemsNone' | 'spaceItemsXs' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg' | 'spaceItemsXl' | 'spaceItems2xl' | 'spaceItems3xl' | 'spaceItems4xl'; '2xl'?: | 'spaceItemsNone' | 'spaceItemsXs' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg' | 'spaceItemsXl' | 'spaceItems2xl' | 'spaceItems3xl' | 'spaceItems4xl'; } | Space items at various breakpoints | |
| spacer | { default?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; sm?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; md?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; lg?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; xl?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; '2xl'?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; } | Spacers at various breakpoints |
FlexItem
| Name | Type | Default | Description |
|---|---|---|---|
| align | { default?: 'alignLeft' | 'alignRight'; sm?: 'alignLeft' | 'alignRight'; md?: 'alignLeft' | 'alignRight'; lg?: 'alignLeft' | 'alignRight'; xl?: 'alignLeft' | 'alignRight'; '2xl'?: 'alignLeft' | 'alignRight'; } | Value to use for margin: auto at various breakpoints | |
| alignSelf | { default?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; sm?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; md?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; lg?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; xl?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; '2xl'?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline'; } | Value to add for align-self property at various breakpoints | |
| children | React.ReactNode | null | content rendered inside the Flex layout |
| className | string | '' | additional classes added to the Flex layout |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | Sets the base component to render. defaults to div |
| flex | { default?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; sm?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; md?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; lg?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; xl?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; '2xl'?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4'; } | Value to add for flex property at various breakpoints | |
| fullWidth | { default?: 'fullWidth'; sm?: 'fullWidth'; md?: 'fullWidth'; lg?: 'fullWidth'; xl?: 'fullWidth'; '2xl'?: 'fullWidth'; } | Whether to set width: 100% at various breakpoints | |
| grow | { default?: 'grow'; sm?: 'grow'; md?: 'grow'; lg?: 'grow'; xl?: 'grow'; '2xl'?: 'grow'; } | Whether to add flex: grow at various breakpoints | |
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; } | Modifies the flex layout element order property | |
| shrink | { default?: 'shrink'; sm?: 'shrink'; md?: 'shrink'; lg?: 'shrink'; xl?: 'shrink'; '2xl'?: 'shrink'; } | Whether to add flex: shrink at various breakpoints | |
| spacer | { default?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; sm?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; md?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; lg?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; xl?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; '2xl'?: | 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl'; } | Spacers 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--item--Order | 0 | |
| .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 | --pf-l-flex--spacer--4xl | 5rem | |
| .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-space-items-4xl > * | --pf-l-flex--spacer | 5rem | |
| .pf-l-flex.pf-m-space-items-4xl > :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 | |
| .pf-l-flex .pf-m-spacer-4xl | --pf-l-flex--spacer | 5rem | |
| .pf-l-flex .pf-m-spacer-4xl:last-child | --pf-l-flex--spacer | 5rem | |
View source on GitHub
