Skip to content
PF-HorizontalLogo-Color

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

Spacing

The flex layout provides two ways of spacing its direct children.

  • Spacing system
    • 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.
  • Gap spacing
    • Gap spacing uses flex gap to space the flex layout's direct children, and can be applied to space rows (row-gap), columns (column-gap), or both (gap). 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.
    • Note using gap along the main axis will override any other spacing applied using the spacing system.

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 gap spacing

Row gap

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

Column gap

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

Gap

Flex item
Flex item
Flex item
Flex item
Flex item
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
columnGap{ default?: | 'columnGap' | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl' | 'columnGap3xl' | 'columnGap4xl'; sm?: | 'columnGap' | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl' | 'columnGap3xl' | 'columnGap4xl'; md?: | 'columnGap' | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl' | 'columnGap3xl' | 'columnGap4xl'; lg?: | 'columnGap' | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl' | 'columnGap3xl' | 'columnGap4xl'; xl?: | 'columnGap' | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl' | 'columnGap3xl' | 'columnGap4xl'; '2xl'?: | 'columnGap' | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl' | 'columnGap3xl' | 'columnGap4xl'; }Gap beween columns at various breakpoints. This will override spacers for the main axis.
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
gap{ default?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl'; sm?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl'; md?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl'; lg?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl'; xl?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl'; '2xl'?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl'; }Gap between items at various breakpoints. This will override spacers for the main axis.
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
rowGap{ default?: | 'rowGap' | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl' | 'rowGap3xl' | 'rowGap4xl'; sm?: | 'rowGap' | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl' | 'rowGap3xl' | 'rowGap4xl'; md?: | 'rowGap' | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl' | 'rowGap3xl' | 'rowGap4xl'; lg?: | 'rowGap' | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl' | 'rowGap3xl' | 'rowGap4xl'; xl?: | 'rowGap' | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl' | 'rowGap3xl' | 'rowGap4xl'; '2xl'?: | 'rowGap' | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl' | 'rowGap3xl' | 'rowGap4xl'; }Gap between rows at various breakpoints. This will override spacers for the main axis.
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

Expand or collapse columnSelectorVariableValue
:where(:root)--pf-v6-l-flex--Display
flex
:where(:root)--pf-v6-l-flex--FlexWrap
wrap
:where(:root)--pf-v6-l-flex--AlignItems
baseline
:where(:root)--pf-v6-l-flex--m-row--AlignItems
baseline
:where(:root)--pf-v6-l-flex--m-row-reverse--AlignItems
baseline
:where(:root)--pf-v6-l-flex--item--Order
0
:where(:root)--pf-v6-l-flex--spacer--column--base
24px
:where(:root)--pf-v6-l-flex--spacer--row--base
8px
:where(:root)--pf-v6-l-flex--RowGap
8px
:where(:root)--pf-v6-l-flex--ColumnGap
0
:where(:root)--pf-v6-l-flex--m-gap--RowGap
8px
:where(:root)--pf-v6-l-flex--m-gap--ColumnGap
24px
:where(:root)--pf-v6-l-flex--m-row-gap--RowGap
8px
:where(:root)--pf-v6-l-flex--m-column-gap--ColumnGap
24px
.pf-v6-l-flex--pf-v6-l-flex--spacer--none
0
.pf-v6-l-flex--pf-v6-l-flex--spacer--xs
4px
.pf-v6-l-flex--pf-v6-l-flex--spacer--sm
8px
.pf-v6-l-flex--pf-v6-l-flex--spacer--md
16px
.pf-v6-l-flex--pf-v6-l-flex--spacer--lg
24px
.pf-v6-l-flex--pf-v6-l-flex--spacer--xl
32px
.pf-v6-l-flex--pf-v6-l-flex--spacer--2xl
48px
.pf-v6-l-flex--pf-v6-l-flex--spacer--3xl
64px
.pf-v6-l-flex--pf-v6-l-flex--spacer--4xl
80px
.pf-v6-l-flex > *--pf-v6-l-flex--spacer
initial
.pf-v6-l-flex > *--pf-v6-l-flex--spacer--column
initial, 24px
.pf-v6-l-flex > *--pf-v6-l-flex--spacer--row
initial, 8px
.pf-v6-l-flex > *:last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-inline-flex--pf-v6-l-flex--Display
inline-flex
.pf-v6-l-flex.pf-m-column--pf-v6-l-flex--RowGap
0
.pf-v6-l-flex.pf-m-column--pf-v6-l-flex--ColumnGap
24px
.pf-v6-l-flex.pf-m-space-items-none > *--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-none > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-xs > *--pf-v6-l-flex--spacer
4px
.pf-v6-l-flex.pf-m-space-items-xs > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-sm > *--pf-v6-l-flex--spacer
8px
.pf-v6-l-flex.pf-m-space-items-sm > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-md > *--pf-v6-l-flex--spacer
16px
.pf-v6-l-flex.pf-m-space-items-md > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-lg > *--pf-v6-l-flex--spacer
24px
.pf-v6-l-flex.pf-m-space-items-lg > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-xl > *--pf-v6-l-flex--spacer
32px
.pf-v6-l-flex.pf-m-space-items-xl > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-2xl > *--pf-v6-l-flex--spacer
48px
.pf-v6-l-flex.pf-m-space-items-2xl > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-3xl > *--pf-v6-l-flex--spacer
64px
.pf-v6-l-flex.pf-m-space-items-3xl > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex.pf-m-space-items-4xl > *--pf-v6-l-flex--spacer
80px
.pf-v6-l-flex.pf-m-space-items-4xl > :last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex .pf-m-spacer-none--pf-v6-l-flex--spacer
0
.pf-v6-l-flex .pf-m-spacer-none:last-child--pf-v6-l-flex--spacer
0
.pf-v6-l-flex .pf-m-spacer-xs--pf-v6-l-flex--spacer
4px
.pf-v6-l-flex .pf-m-spacer-xs:last-child--pf-v6-l-flex--spacer
4px
.pf-v6-l-flex .pf-m-spacer-sm--pf-v6-l-flex--spacer
8px
.pf-v6-l-flex .pf-m-spacer-sm:last-child--pf-v6-l-flex--spacer
8px
.pf-v6-l-flex .pf-m-spacer-md--pf-v6-l-flex--spacer
16px
.pf-v6-l-flex .pf-m-spacer-md:last-child--pf-v6-l-flex--spacer
16px
.pf-v6-l-flex .pf-m-spacer-lg--pf-v6-l-flex--spacer
24px
.pf-v6-l-flex .pf-m-spacer-lg:last-child--pf-v6-l-flex--spacer
24px
.pf-v6-l-flex .pf-m-spacer-xl--pf-v6-l-flex--spacer
32px
.pf-v6-l-flex .pf-m-spacer-xl:last-child--pf-v6-l-flex--spacer
32px
.pf-v6-l-flex .pf-m-spacer-2xl--pf-v6-l-flex--spacer
48px
.pf-v6-l-flex .pf-m-spacer-2xl:last-child--pf-v6-l-flex--spacer
48px
.pf-v6-l-flex .pf-m-spacer-3xl--pf-v6-l-flex--spacer
64px
.pf-v6-l-flex .pf-m-spacer-3xl:last-child--pf-v6-l-flex--spacer
64px
.pf-v6-l-flex .pf-m-spacer-4xl--pf-v6-l-flex--spacer
80px
.pf-v6-l-flex .pf-m-spacer-4xl:last-child--pf-v6-l-flex--spacer
80px
.pf-v6-l-flex.pf-m-gap--pf-v6-l-flex--RowGap
8px
.pf-v6-l-flex.pf-m-gap--pf-v6-l-flex--ColumnGap
24px
.pf-v6-l-flex.pf-m-gap-none--pf-v6-l-flex--RowGap
0
.pf-v6-l-flex.pf-m-gap-none--pf-v6-l-flex--ColumnGap
0
.pf-v6-l-flex.pf-m-gap-xs--pf-v6-l-flex--RowGap
4px
.pf-v6-l-flex.pf-m-gap-xs--pf-v6-l-flex--ColumnGap
4px
.pf-v6-l-flex.pf-m-gap-sm--pf-v6-l-flex--RowGap
8px
.pf-v6-l-flex.pf-m-gap-sm--pf-v6-l-flex--ColumnGap
8px
.pf-v6-l-flex.pf-m-gap-md--pf-v6-l-flex--RowGap
16px
.pf-v6-l-flex.pf-m-gap-md--pf-v6-l-flex--ColumnGap
16px
.pf-v6-l-flex.pf-m-gap-lg--pf-v6-l-flex--RowGap
24px
.pf-v6-l-flex.pf-m-gap-lg--pf-v6-l-flex--ColumnGap
24px
.pf-v6-l-flex.pf-m-gap-xl--pf-v6-l-flex--RowGap
32px
.pf-v6-l-flex.pf-m-gap-xl--pf-v6-l-flex--ColumnGap
32px
.pf-v6-l-flex.pf-m-gap-2xl--pf-v6-l-flex--RowGap
48px
.pf-v6-l-flex.pf-m-gap-2xl--pf-v6-l-flex--ColumnGap
48px
.pf-v6-l-flex.pf-m-gap-3xl--pf-v6-l-flex--RowGap
64px
.pf-v6-l-flex.pf-m-gap-3xl--pf-v6-l-flex--ColumnGap
64px
.pf-v6-l-flex.pf-m-gap-4xl--pf-v6-l-flex--RowGap
80px
.pf-v6-l-flex.pf-m-gap-4xl--pf-v6-l-flex--ColumnGap
80px
.pf-v6-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-xs, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > *--pf-v6-l-flex--spacer--row
0
.pf-v6-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-xs, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > *--pf-v6-l-flex--spacer--column
0
.pf-v6-l-flex.pf-m-row-gap--pf-v6-l-flex--RowGap
8px
.pf-v6-l-flex.pf-m-row-gap-none--pf-v6-l-flex--RowGap
0
.pf-v6-l-flex.pf-m-row-gap-xs--pf-v6-l-flex--RowGap
4px
.pf-v6-l-flex.pf-m-row-gap-sm--pf-v6-l-flex--RowGap
8px
.pf-v6-l-flex.pf-m-row-gap-md--pf-v6-l-flex--RowGap
16px
.pf-v6-l-flex.pf-m-row-gap-lg--pf-v6-l-flex--RowGap
24px
.pf-v6-l-flex.pf-m-row-gap-xl--pf-v6-l-flex--RowGap
32px
.pf-v6-l-flex.pf-m-row-gap-2xl--pf-v6-l-flex--RowGap
48px
.pf-v6-l-flex.pf-m-row-gap-3xl--pf-v6-l-flex--RowGap
64px
.pf-v6-l-flex.pf-m-row-gap-4xl--pf-v6-l-flex--RowGap
80px
.pf-v6-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-xs, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > *--pf-v6-l-flex--spacer--row
0
.pf-v6-l-flex.pf-m-column-gap--pf-v6-l-flex--ColumnGap
24px
.pf-v6-l-flex.pf-m-column-gap-none--pf-v6-l-flex--ColumnGap
0
.pf-v6-l-flex.pf-m-column-gap-xs--pf-v6-l-flex--ColumnGap
4px
.pf-v6-l-flex.pf-m-column-gap-sm--pf-v6-l-flex--ColumnGap
8px
.pf-v6-l-flex.pf-m-column-gap-md--pf-v6-l-flex--ColumnGap
16px
.pf-v6-l-flex.pf-m-column-gap-lg--pf-v6-l-flex--ColumnGap
24px
.pf-v6-l-flex.pf-m-column-gap-xl--pf-v6-l-flex--ColumnGap
32px
.pf-v6-l-flex.pf-m-column-gap-2xl--pf-v6-l-flex--ColumnGap
48px
.pf-v6-l-flex.pf-m-column-gap-3xl--pf-v6-l-flex--ColumnGap
64px
.pf-v6-l-flex.pf-m-column-gap-4xl--pf-v6-l-flex--ColumnGap
80px
.pf-v6-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-xs, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > *--pf-v6-l-flex--spacer--column
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines