Skip to content

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)--pf-v6-l-flex--Display
flex
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--FlexWrap
wrap
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--AlignItems
baseline
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--m-row--AlignItems
baseline
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--m-row-reverse--AlignItems
baseline
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--item--Order
0
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--spacer--column--base
1rem
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--spacer--row--base
0.5rem
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--RowGap
0.5rem
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--ColumnGap
0
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--m-gap--RowGap
0.5rem
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--m-gap--ColumnGap
1rem
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--m-row-gap--RowGap
0.5rem
:where(:root, .pf-v6-l-flex)--pf-v6-l-flex--m-column-gap--ColumnGap
1rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--none
0
.pf-v6-l-flex--pf-v6-l-flex--spacer--xs
0.25rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--sm
0.5rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--md
1rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--lg
1.5rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--xl
2rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--2xl
3rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--3xl
4rem
.pf-v6-l-flex--pf-v6-l-flex--spacer--4xl
5rem
.pf-v6-l-flex > *--pf-v6-l-flex--spacer
initial
.pf-v6-l-flex > *--pf-v6-l-flex--spacer--column
initial, 1rem
.pf-v6-l-flex > *--pf-v6-l-flex--spacer--row
initial, 0.5rem
.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
1rem
.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
0.25rem
.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
0.5rem
.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
1rem
.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
1.5rem
.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
2rem
.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
3rem
.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
4rem
.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
5rem
.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
0.25rem
.pf-v6-l-flex .pf-m-spacer-xs:last-child--pf-v6-l-flex--spacer
0.25rem
.pf-v6-l-flex .pf-m-spacer-sm--pf-v6-l-flex--spacer
0.5rem
.pf-v6-l-flex .pf-m-spacer-sm:last-child--pf-v6-l-flex--spacer
0.5rem
.pf-v6-l-flex .pf-m-spacer-md--pf-v6-l-flex--spacer
1rem
.pf-v6-l-flex .pf-m-spacer-md:last-child--pf-v6-l-flex--spacer
1rem
.pf-v6-l-flex .pf-m-spacer-lg--pf-v6-l-flex--spacer
1.5rem
.pf-v6-l-flex .pf-m-spacer-lg:last-child--pf-v6-l-flex--spacer
1.5rem
.pf-v6-l-flex .pf-m-spacer-xl--pf-v6-l-flex--spacer
2rem
.pf-v6-l-flex .pf-m-spacer-xl:last-child--pf-v6-l-flex--spacer
2rem
.pf-v6-l-flex .pf-m-spacer-2xl--pf-v6-l-flex--spacer
3rem
.pf-v6-l-flex .pf-m-spacer-2xl:last-child--pf-v6-l-flex--spacer
3rem
.pf-v6-l-flex .pf-m-spacer-3xl--pf-v6-l-flex--spacer
4rem
.pf-v6-l-flex .pf-m-spacer-3xl:last-child--pf-v6-l-flex--spacer
4rem
.pf-v6-l-flex .pf-m-spacer-4xl--pf-v6-l-flex--spacer
5rem
.pf-v6-l-flex .pf-m-spacer-4xl:last-child--pf-v6-l-flex--spacer
5rem
.pf-v6-l-flex.pf-m-gap--pf-v6-l-flex--RowGap
0.5rem
.pf-v6-l-flex.pf-m-gap--pf-v6-l-flex--ColumnGap
1rem
.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
0.25rem
.pf-v6-l-flex.pf-m-gap-xs--pf-v6-l-flex--ColumnGap
0.25rem
.pf-v6-l-flex.pf-m-gap-sm--pf-v6-l-flex--RowGap
0.5rem
.pf-v6-l-flex.pf-m-gap-sm--pf-v6-l-flex--ColumnGap
0.5rem
.pf-v6-l-flex.pf-m-gap-md--pf-v6-l-flex--RowGap
1rem
.pf-v6-l-flex.pf-m-gap-md--pf-v6-l-flex--ColumnGap
1rem
.pf-v6-l-flex.pf-m-gap-lg--pf-v6-l-flex--RowGap
1.5rem
.pf-v6-l-flex.pf-m-gap-lg--pf-v6-l-flex--ColumnGap
1.5rem
.pf-v6-l-flex.pf-m-gap-xl--pf-v6-l-flex--RowGap
2rem
.pf-v6-l-flex.pf-m-gap-xl--pf-v6-l-flex--ColumnGap
2rem
.pf-v6-l-flex.pf-m-gap-2xl--pf-v6-l-flex--RowGap
3rem
.pf-v6-l-flex.pf-m-gap-2xl--pf-v6-l-flex--ColumnGap
3rem
.pf-v6-l-flex.pf-m-gap-3xl--pf-v6-l-flex--RowGap
4rem
.pf-v6-l-flex.pf-m-gap-3xl--pf-v6-l-flex--ColumnGap
4rem
.pf-v6-l-flex.pf-m-gap-4xl--pf-v6-l-flex--RowGap
5rem
.pf-v6-l-flex.pf-m-gap-4xl--pf-v6-l-flex--ColumnGap
5rem
.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
0.5rem
.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
0.25rem
.pf-v6-l-flex.pf-m-row-gap-sm--pf-v6-l-flex--RowGap
0.5rem
.pf-v6-l-flex.pf-m-row-gap-md--pf-v6-l-flex--RowGap
1rem
.pf-v6-l-flex.pf-m-row-gap-lg--pf-v6-l-flex--RowGap
1.5rem
.pf-v6-l-flex.pf-m-row-gap-xl--pf-v6-l-flex--RowGap
2rem
.pf-v6-l-flex.pf-m-row-gap-2xl--pf-v6-l-flex--RowGap
3rem
.pf-v6-l-flex.pf-m-row-gap-3xl--pf-v6-l-flex--RowGap
4rem
.pf-v6-l-flex.pf-m-row-gap-4xl--pf-v6-l-flex--RowGap
5rem
.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
1rem
.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
0.25rem
.pf-v6-l-flex.pf-m-column-gap-sm--pf-v6-l-flex--ColumnGap
0.5rem
.pf-v6-l-flex.pf-m-column-gap-md--pf-v6-l-flex--ColumnGap
1rem
.pf-v6-l-flex.pf-m-column-gap-lg--pf-v6-l-flex--ColumnGap
1.5rem
.pf-v6-l-flex.pf-m-column-gap-xl--pf-v6-l-flex--ColumnGap
2rem
.pf-v6-l-flex.pf-m-column-gap-2xl--pf-v6-l-flex--ColumnGap
3rem
.pf-v6-l-flex.pf-m-column-gap-3xl--pf-v6-l-flex--ColumnGap
4rem
.pf-v6-l-flex.pf-m-column-gap-4xl--pf-v6-l-flex--ColumnGap
5rem
.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