Flex

Introduction

The flex layout is based on the CSS Flex properties where the layout determines how a flex item will grow or shrink to fit the space available in its container. By default, a flex layout uses the spacing system to space children along the main axis and gap spacing to space any wrapping children along the cross axis, flex-wrap is set to wrap, and align-items is set to baseline. The flex layout is infinitely nestable and can be nested to group items within.

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.

Breakpoints

Breakpoints -on-sm, -on-md, -on-lg, -on-xl, and -on-2xl are provided.

Usefulness

  • Use when content dictates layout and elements wrap when necessary.
  • Use when a rigid grid is not necessary/wanted.

Differences from utility class

  • It contains multiple css declarations and does not use the !important tag.
  • It does not require wrapping elements in columns or rows.
  • It breaks the dependency upon adding utility classes to each child.
  • It can be applied to container elements or components.

Examples

Basic flex layout

Basic flex example

Flex item
Flex item
Flex item
Flex item

Nested flex example

Flex item
Flex item
Flex item
Flex item
Flex item

Nested flex and items example

Flex item
Flex item
Flex item
Flex item
Flex item

Basic flex layout overview

The CSS approach, by keeping specificity low on base class properties and resetting css variable values at higher specificities, allows any spacer property to be overwritten with a single selector (specificity of 10 or greater).

Basic flex layout usage

Class
Applied to
Outcome
.pf-v6-l-flex
*
Initiates the flex layout. Required
.pf-v6-l-flex__item
.pf-v6-l-flex > *
Initiates a flex item. Required

Spacing system

Spacing system on parent example

Flex item
Flex item
Flex item
Flex item
Flex item

Spacing system on children example

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

Spacing system on parent and children example

Flex item
Flex item - md
Flex item
Flex item
Flex item

Spacing system usage

Class
Applied to
Outcome
.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the spacer between direct children along the main axis of a flex layout.
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}
.pf-v6-l-flex > *
Modifies the spacer for any individual direct child along the main axis of a flex layout.

Gap spacing

Row gap example

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

Column gap example

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

Gap example

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

Gap spacing usage

Class
Applied to
Outcome
.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the space between columns and rows.
.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the space between rows.
.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the space between columns.

Layout modifiers

Default layout example

Flex item
Flex item
Flex item

Inline flex layout example

Flex item
Flex item
Flex item

Basic flex grow example

Adjusting width with .pf-m-grow, which sets flex-grow: 1. In this example, the first group is set to .pf-m-grow, will occupy the remaining available space.

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

Flex grow 1 example

Adjusting width with .pf-m-flex-1. In this example, all groups are set to .pf-m-flex-1. They will share available space equally.

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

Flex grow 1-4 example

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

Layout modifiers usage

Class
Applied to
Outcome
.pf-m-inline-flex{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout display property to inline-flex.
.pf-m-grow{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex-grow property to 1.
.pf-m-shrink{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex-shrink property to 1.
.pf-m-full-width{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex item to full width of parent.
.pf-m-flex-1{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 1 0 0.
.pf-m-flex-2{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 2 0 0.
.pf-m-flex-3{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 3 0 0.
.pf-m-flex-4{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 4 0 0.
.pf-m-flex-default{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Resets a nested flex layout or flex item flex shorthand property to 0 1 auto.
.pf-m-flex-none{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to none.

Column layout modifiers

Basic column example

Flex item
Flex item
Flex item

Nested column example

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


Flex item
Flex item
Flex item
Flex item
Flex item

Usage

Class
Applied to
Outcome
.pf-m-column{-on-[breakpoint]}
.pf-v6-l-flex
Modifies flex-direction property to column.

Responsive layouts

Flex direction responsive example

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


Flex item
Because this text is long enough to wrap, this item's width will force the adjacent item to wrap. If content is likely to wrap, modifiers will need to be used to control width. 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 item
To control the width of the flex item, set .pf-m-flex-1. 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

Responsive layouts usage

Class
Applied to
Outcome
.pf-m-column{-on-[breakpoint]}
.pf-v6-l-flex
Modifies flex-direction property to column.
.pf-m-row{-on-[breakpoint]}
.pf-v6-l-flex
Modifies flex-direction property to row.

Alignment

Basic align right example

Aligning right with .pf-m-align-right. This solution will always align element right by setting margin-inline-start: auto, including when wrapped.

Flex item
Flex item
Flex item
Flex item
Flex item

Align right on single item example

Flex item
Flex item

Align right on multiple groups example

Untitled example

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

Alignment using .pf-m-flex-1 example

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

Alignment using .pf-m-align-self-flex-end example

Flex item
Flex item
Flex item
Flex item
Flex item

Aligning nested columns with .pf-m-align-self-center example

Flex item
Flex item
Flex item
Flex item
Flex item

Aligning nested columns with .pf-m-align-self-baseline example

Flex item
Flex item
Flex item
Flex item
Flex item

Aligning nested columns with .pf-m-align-self-stretch example

Flex item
Flex item
Flex item
Flex item
Flex item

Alignment usage

Class
Applied to
Outcome
.pf-m-align-right{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies margin-inline-start property to auto.
.pf-m-align-left{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Resets margin-inline-start property 0.
.pf-m-align-self-flex-start{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies align-self property to flex-start.
.pf-m-align-self-flex-end{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies align-self property to flex-end.
.pf-m-align-self-flex-center{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies align-self property to center.
.pf-m-align-self-flex-baseline{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies align-self property to baseline.
.pf-m-align-self-flex-stretch{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies align-self property to stretch.

Justification

Justify content flex end example

Flex item
Flex item
Flex item
Flex item

Justify content space between example

Flex item
Flex item
Flex item

Justify content flex start example

Flex item
Flex item
Flex item
Class
Applied to
Outcome
.pf-m-justify-content-flex-end{-on-[breakpoint]}
.pf-v6-l-flex
Modifies justification property and descendant spacing.
.pf-m-justify-content-flex-space-between{-on-[breakpoint]}
.pf-v6-l-flex
Modifies justification property and descendant spacing.
.pf-m-justify-content-flex-start{-on-[breakpoint]}
.pf-v6-l-flex
Modifies justification property and descendant spacing, used primarily to reset spacing to default.

Ordering

Ordering - Ordering can be applied to nested .pf-v6-l-flex and .pf-v6-l-flex__items. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as --pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}.

Basic ordering example

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

First and last ordering example

Item A
Item B
Item C

Responsive first last ordering example

Item A
Item B
Item C

Responsive ordering example

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

Ordering usage

Class
Applied to
Outcome
--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies the flex layout element order property.

Flex layout as list

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

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-l-flex
*
Initiates the flex layout. Required
.pf-v6-l-flex__item
.pf-v6-l-flex > *
Initiates a flex item. Required
.pf-m-flex{-on-[breakpoint]}
.pf-v6-l-flex
Initializes or resets the flex layout display property to flex.
.pf-m-inline-flex{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout display property to inline-flex.
.pf-m-grow{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex-grow property to 1.
.pf-m-shrink{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex-shrink property to 1.
.pf-m-full-width{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex item to full width of parent.
.pf-m-flex-1{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 1 0 0.
.pf-m-flex-2{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 2 0 0.
.pf-m-flex-3{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 3 0 0.
.pf-m-flex-4{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to 4 0 0.
.pf-m-flex-default{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Resets a nested flex layout or flex item flex shorthand property to 0 1 auto.
.pf-m-flex-none{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to none.
.pf-m-column-reverse{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout flex-direction property to column-reverse.
.pf-m-row-reverse{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout flex-direction property to row-reverse.
.pf-m-wrap{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout flex-wrap property to wrap.
.pf-m-wrap-reverse{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout flex-wrap property to wrap-reverse.
.pf-m-nowrap{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout flex-wrap property to nowrap.
.pf-m-justify-content-flex-start{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout justify-content property to flex-start.
.pf-m-justify-content-flex-end{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout justify-content property to flex-end.
.pf-m-justify-content-center{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout justify-content property to center.
.pf-m-justify-content-space-between{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout justify-content property to space-between.
.pf-m-justify-content-space-around{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout justify-content property to space-around.
.pf-m-justify-content-space-evenly{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout justify-content property to space-evenly.
.pf-m-align-items-flex-start{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-items property to flex-start.
.pf-m-align-items-flex-end{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-items property to flex-end.
.pf-m-align-items-center{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-items property to center.
.pf-m-align-items-stretch{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-items property to stretch.
.pf-m-align-items-baseline{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-items property to baseline.
.pf-m-align-content-flex-start{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-content property to flex-start.
.pf-m-align-content-flex-end{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-content property to flex-end.
.pf-m-align-content-center{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-content property to center.
.pf-m-align-content-stretch{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-content property to stretch.
.pf-m-align-content-space-between{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-content property to space-between.
.pf-m-align-content-space-around{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout align-content property to space-around.
.pf-m-align-left{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Resets the flex layout element margin-inline-start property to 0.
.pf-m-align-right{-on-[breakpoint]}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies the flex layout element margin-inline-start property to auto.
--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item
Modifies the flex layout element order property.

Spacer system usage

Class
Applied to
Outcome
.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the flex layout to add space between items on the main axis.
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}
.pf-v6-l-flex, .pf-v6-l-flex > .pf-v6-l-flex__item
Modifies the spacer for any direct child along the main axis of a flex layout.

Gap spacing usage

Class
Applied to
Outcome
.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the space between columns and rows.
.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the space between rows.
.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}
.pf-v6-l-flex
Modifies the space between columns.

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