Skip to content
Patternfly Logo

Flex

Flex Basics

Basic

Flex item
Flex item
Flex item
Flex item
Flex item

Nesting

Flex item
Flex item
Flex item
Flex item
Flex item

Nested with items

Flex item
Flex item
Flex item
Flex item
Flex item

Flex Spacing

Individually spaced

Item - none
Item - xs
Item -sm
Item - md
Item - lg
Item - xl
Item - 2xl
Item - 3xl

Spacing xl

Flex item
Flex item
Flex item
Flex item
Flex item

Spacing none

Flex item
Flex item
Flex item
Flex item
Flex item

Flex layout modifiers

Default layout

Flex item
Flex item
Flex item
Flex item
Flex item

Inline

Flex item
Flex item
Flex item
Flex item
Flex item

Using canGrow

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Adjusting width

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Specifying column widths

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Column layout modifiers

Column layout

Flex item
Flex item
Flex item

Stacking elements

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Nesting elements in columns

Flex item
Flex item
Flex item
Flex item
Flex item

Responsive layout modifiers

Switching between direction column and row

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

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

Aligning right

Flex item
Flex item
Flex item
Flex item
Flex item

Align right on single item

Flex item
Flex item

Align right on multiple groups

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Align adjacent content

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Align self flex end

Flex item
Flex item
Flex item
Flex item
Flex item

Align self center

Flex item
Flex item
Flex item
Flex item
Flex item

Align self baseline

Flex item
Flex item
Flex item
Flex item
Flex item

Align self stretch

Flex item
Flex item
Flex item
Flex item
Flex item

Flex justification

Justify content flex end

Flex item
Flex item
Flex item
Flex item

Justify content space between

Flex item
Flex item
Flex item

Justify content flex start

Flex item
Flex item
Flex item

Flex item order

First last ordering

Item A
Item B
Item C

Responsive first last ordering

Item A
Item B
Item C

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

Alternative components

  • Flex item
  • Flex item
  • Flex item
  • Flex item
  • Flex item

Props

Flex

*required
NameTypeDefaultDescription
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
childrenReact.ReactNodenullcontent rendered inside the Flex layout
classNamestring''additional classes added to the Flex layout
componentReact.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

*required
NameTypeDefaultDescription
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
childrenReact.ReactNodenullcontent rendered inside the Flex layout
classNamestring''additional classes added to the Flex layout
componentReact.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