Patternfly Logo

Examples

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

Props

Flex properties
NameTypeRequiredDefaultDescription
align{ default?: 'alignLeft' | 'alignRight'; sm?: 'alignLeft' | 'alignRight'; md?: 'alignLeft' | 'alignRight'; lg?: 'alignLeft' | 'alignRight'; xl?: 'alignLeft' | 'alignRight'; '2xl'?: 'alignLeft' | 'alignRight'; }NoValue 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'; }NoValue 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'; }NoValue 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'; }NoValue to add for align-self property at various breakpoints
childrenReact.ReactNodeNonullcontent rendered inside the Flex layout
classNamestringNo''additional classes added to the Flex layout
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'; }NoValue 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'; }NoValue 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'; }NoValue 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'; }NoValue to set for flex-wrap property at various breakpoints
fullWidth{ default?: 'fullWidth'; sm?: 'fullWidth'; md?: 'fullWidth'; lg?: 'fullWidth'; xl?: 'fullWidth'; '2xl'?: 'fullWidth'; }NoWhether to set width: 100% at various breakpoints
grow{ default?: 'grow'; sm?: 'grow'; md?: 'grow'; lg?: 'grow'; xl?: 'grow'; '2xl'?: 'grow'; }NoWhether 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'; }NoValue to add for justify-content property at various breakpoints
shrink{ default?: 'shrink'; sm?: 'shrink'; md?: 'shrink'; lg?: 'shrink'; xl?: 'shrink'; '2xl'?: 'shrink'; }NoWhether 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'; }NoSpace 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'; }NoSpacers at various breakpoints
FlexItem properties
NameTypeRequiredDefaultDescription
align{ default?: 'alignLeft' | 'alignRight'; sm?: 'alignLeft' | 'alignRight'; md?: 'alignLeft' | 'alignRight'; lg?: 'alignLeft' | 'alignRight'; xl?: 'alignLeft' | 'alignRight'; '2xl'?: 'alignLeft' | 'alignRight'; }NoValue 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'; }NoValue to add for align-self property at various breakpoints
childrenReact.ReactNodeNonullcontent rendered inside the Flex layout
classNamestringNo''additional classes added to the Flex layout
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'; }NoValue to add for flex property at various breakpoints
fullWidth{ default?: 'fullWidth'; sm?: 'fullWidth'; md?: 'fullWidth'; lg?: 'fullWidth'; xl?: 'fullWidth'; '2xl'?: 'fullWidth'; }NoWhether to set width: 100% at various breakpoints
grow{ default?: 'grow'; sm?: 'grow'; md?: 'grow'; lg?: 'grow'; xl?: 'grow'; '2xl'?: 'grow'; }NoWhether to add flex: grow at various breakpoints
shrink{ default?: 'shrink'; sm?: 'shrink'; md?: 'shrink'; lg?: 'shrink'; xl?: 'shrink'; '2xl'?: 'shrink'; }NoWhether 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'; }NoSpacers 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