Skip to content
Patternfly Logo

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. The system relies on a default spacer value --pf-l-flex--spacer--base, whose value is --pf-global--spacer--md or 16px that is applied to flex items. By default, flex-wrap is set to wrap and align-items is set to baseline.

Default spacing

  • Flex items (not last child): margin-right: 16px.
  • Nested .pf-l-flex containers (not last child): margin-right: 16px.
  • .pf-m-column direct descendants (not last child): margin-bottom: 16px.
  • .pf-m-column nested .pf-l-flex containers (not last child): margin-bottom: 16px.

Features

  • .pf-l-flex is infinitely nestable and can be used to group items within.
  • .pf-m-spacer-{xs,sm,md,lg,xl,2xl,3xl} can be applied to parent or direct children and changes the spacer value for only the element to which it is applied. Responsive spacers can be used by appending {-on-[breakpoint]} to .pf-m-spacer-{size}. Example: .pf-m-spacer-lg-on-xl.
  • .pf-m-space-items-{xs,sm,md,lg,xl,2xl,3xl} can be applied to .pf-l-flex only and changes the spacing of direct children only. Responsive spacers can be used by appending {-on-[breakpoint]} to .pf-m-space-items-{size}. Example: .pf-m-space-items-lg-on-xl.

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

Basic flex - .pf-l-flex.

Flex item
Flex item
Flex item
Flex item

Flex nesting - .pf-l-flex > .pf-l-flex.

Flex item
Flex item
Flex item
Flex item
Flex item

Nested flex and items.

Flex item
Flex item
Flex item
Flex item
Flex item

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).

Usage

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

Spacing

Individually spaced items - .pf-m-spacer-{xs,sm,md,lg,xl,2xl,3xl}.

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

Flex with modified spacing - .pf-m-space-items-xl.

Flex item
Flex item
Flex item
Flex item
Flex item

Flex with modified spacing - .pf-m-space-items-none.

Flex item
Flex item
Flex item
Flex item
Flex item

Applying .pf-m-spacer-{size} to direct descendants of .pf-l-flex will override css variable value.

Applying .pf-m-space-items-{size} to .pf-l-flex will override css variable values for direct descendants, excluding last child. This spacing can be overridden for direct descendant with .pf-m-spacer-{size}.

Usage

Class
Applied to
Outcome
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-l-flex > .pf-l-flex, .pf-l-flex__item
Modifies a nested flex layout or a flex item spacing.
.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-l-flex
Modifies the flex layout direct descendant spacing.

Layout modifiers

Default layout .pf-l-flex.

Flex item
Flex item
Flex item

Inline flex .pf-m-inline-flex.

Flex item
Flex item
Flex item

Adjusting width with .pf-m-grow. In this example, the first group is set to .pf-m-grow and will occupy the remaining available space.

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

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

Specifying column widths with .pf-m-flex-{1,2,3}.

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

Usage

Class
Applied to
Outcome
.pf-m-inline-flex{-on-[breakpoint]}
.pf-l-flex
Modifies the flex layout display property to inline-flex.
.pf-m-grow{-on-[breakpoint]}
.pf-l-flex > .pf-l-flex, .pf-l-flex__item
Modifies a nested flex layout or flex item flex-grow property to 1.
.pf-m-shrink{-on-[breakpoint]}
.pf-l-flex > .pf-l-flex, .pf-l-flex__item
Modifies a nested flex layout or flex item flex-shrink property to 1.
.pf-m-full-width{-on-[breakpoint]}
.pf-l-flex > .pf-l-flex, .pf-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-l-flex > .pf-l-flex, .pf-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-l-flex > .pf-l-flex, .pf-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-l-flex > .pf-l-flex, .pf-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-l-flex > .pf-l-flex, .pf-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-l-flex > .pf-l-flex, .pf-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-l-flex > .pf-l-flex, .pf-l-flex__item
Modifies a nested flex layout or flex item flex shorthand property to none.

Column layout modifiers

Flex column layout. When .pf-m-column is applied to .pf-l-flex, spacing will be applied to margin-bottom for direct descendants.

Flex item
Flex item
Flex item

Stacking .pf-l-flex elements.

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

Nesting .pf-l-flex elements and setting to .pf-m-column.

Flex item
Flex item
Flex item
Flex item
Flex item

Usage

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

Responsive layout modifiers

Switching between flex-direction column and row at breakpoints ( -on-lg).

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

Switching between flex-direction column and row at breakpoints ( -on-lg). If content is likely to wrap, modifiers will need to be used to control width. The example below wraps because the flex item expands in response to long paragraph text.

Flex item
Because this text is long enough to wrap, this item's width will force the adjacent item to wrap. 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

Switching between flex-direction column and row at breakpoints ( -on-lg). To control the width of the flex item, set .pf-m-flex-1 on the flex group containing the long paragraph 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

Usage

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

Alignment

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

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

Using .pf-m-flex-1 to align adjacent content.

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

Aligning nested columns with .pf-m-align-self-flex-end.

Flex item
Flex item
Flex item
Flex item
Flex item

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

Flex item
Flex item
Flex item
Flex item
Flex item

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

Flex item
Flex item
Flex item
Flex item
Flex item

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

Flex item
Flex item
Flex item
Flex item
Flex item

Usage

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

Justification

Justify content with .pf-m-justify-content-flex-end.

Flex item
Flex item
Flex item
Flex item

Justify content with .pf-m-justify-content-space-between.

Flex item
Flex item
Flex item

Justify content with .pf-m-justify-content-flex-start.

Flex item
Flex item
Flex item

Ordering

Ordering - Ordering can be applied to nested .pf-l-flex and .pf-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-l-flex--item--Order{-on-[breakpoint]}: {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

List type

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

Usage

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

Documentation

Usage

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

Spacer system

Class
Applied to
Outcome
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-l-flex, .pf-l-flex > .pf-l-flex__item
Modifies a nested flex layout or a flex item spacing.
.pf-m-item-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-l-flex
Modifies the flex layout direct descendant spacing.

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