HTML

Flex

IntroductionFeaturesExamplesDocumentationCSS Variables

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

  • -on-sm, -on-md, -on-lg, -on-xl, -on-2xl.

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

ClassApplied toOutcome
.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

ClassApplied toOutcome
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies a nested flex layout or a flex item spacing.
.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}.pf-l-flexModifies 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-growand 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

ClassApplied toOutcome
.pf-m-inline-flex{-on-[breakpoint]}.pf-l-flexModifies the flex layout display property to inline-flex.
.pf-m-grow{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemResets 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__itemModifies a nested flex layout or flex item flex shorthand property to none.

Column layout modifiers

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

Flex item
Flex item
Flex item

Stacking .pf-l-flexelements.

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

Nesting .pf-l-flexelements and setting to .pf-m-column.

Flex item
Flex item
Flex item
Flex item
Flex item

Usage

ClassApplied toOutcome
.pf-m-column{-on-[breakpoint]}.pf-l-flexModifies 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-1on 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

ClassApplied toOutcome
.pf-m-column{-on-[breakpoint]}.pf-l-flexModifies flex-direction property to column.
.pf-m-row{-on-[breakpoint]}.pf-l-flexModifies 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-1to 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

ClassApplied toOutcome
.pf-m-align-right{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies margin-left property to auto.
.pf-m-align-left{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemResets margin-left property 0.
.pf-m-align-self-flex-start{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies align-self property to flex-start.
.pf-m-align-self-flex-end{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies align-self property to flex-end.
.pf-m-align-self-flex-center{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies align-self property to center.
.pf-m-align-self-flex-baseline{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies align-self property to baseline.
.pf-m-align-self-flex-stretch{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies 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

Usage

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

Documentation

Usage

ClassApplied toOutcome
.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-flexInitializes or resets the flex layout display property to flex.
.pf-m-inline-flex{-on-[breakpoint]}.pf-l-flexModifies the flex layout display property to inline-flex.
.pf-m-grow{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemModifies 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__itemResets 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__itemModifies a nested flex layout or flex item flex shorthand property to none.
.pf-m-column-reverse{-on-[breakpoint]}.pf-l-flexModifies the flex layout flex-direction property to column-reverse.
.pf-m-row-reverse{-on-[breakpoint]}.pf-l-flexModifies the flex layout flex-direction property to row-reverse.
.pf-m-wrap{-on-[breakpoint]}.pf-l-flexModifies the flex layout flex-wrap property to wrap.
.pf-m-wrap-reverse{-on-[breakpoint]}.pf-l-flexModifies the flex layout flex-wrap property to wrap-reverse.
.pf-m-nowrap{-on-[breakpoint]}.pf-l-flexModifies the flex layout flex-wrap property to nowrap.
.pf-m-justify-content-flex-start{-on-[breakpoint]}.pf-l-flexModifies the flex layout justify-content property to flex-start.
.pf-m-justify-content-flex-end{-on-[breakpoint]}.pf-l-flexModifies the flex layout justify-content property to flex-end.
.pf-m-justify-content-center{-on-[breakpoint]}.pf-l-flexModifies the flex layout justify-content property to center.
.pf-m-justify-content-space-between{-on-[breakpoint]}.pf-l-flexModifies the flex layout justify-content property to space-between.
.pf-m-justify-content-space-around{-on-[breakpoint]}.pf-l-flexModifies the flex layout justify-content property to space-around.
.pf-m-justify-content-space-evenly{-on-[breakpoint]}.pf-l-flexModifies the flex layout justify-content property to space-evenly.
.pf-m-align-items-flex-start{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-items property to flex-start.
.pf-m-align-items-flex-end{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-items property to flex-end.
.pf-m-align-items-center{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-items property to center.
.pf-m-align-items-stretch{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-items property to stretch.
.pf-m-align-items-baseline{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-items property to baseline.
.pf-m-align-content-flex-start{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-content property to flex-start.
.pf-m-align-content-flex-end{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-content property to flex-end.
.pf-m-align-content-center{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-content property to center.
.pf-m-align-content-stretch{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-content property to stretch.
.pf-m-align-content-space-between{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-content property to space-between.
.pf-m-align-content-space-around{-on-[breakpoint]}.pf-l-flexModifies the flex layout align-content property to space-around.
.pf-m-align-left{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemResets the flex layout element margin-left property to 0.
.pf-m-align-right{-on-[breakpoint]}.pf-l-flex > .pf-l-flex, .pf-l-flex__itemModifies the flex layout element margin-left property to auto.

Spacer system

ClassApplied toOutcome
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}.pf-l-flex, .pf-l-flex > .pf-l-flex__itemModifies 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-flexModifies the flex layout direct descendant spacing.

CSS Variables

--pf-l-flex--AlignItemsl_flex_AlignItems
baseline
--pf-l-flex--Displayl_flex_Display
inline-flex
--pf-l-flex--FlexWrapl_flex_FlexWrap
wrap
--pf-l-flex--m-row--AlignItemsl_flex_m_row_AlignItems
baseline
--pf-l-flex--m-row-reverse--AlignItemsl_flex_m_row_reverse_AlignItems
baseline
--pf-l-flex--spacerl_flex_spacer
4rem
--pf-l-flex--spacer--2xll_flex_spacer_2xl
3rem
--pf-l-flex--spacer--3xll_flex_spacer_3xl
4rem
--pf-l-flex--spacer-basel_flex_spacer_base
1rem
--pf-l-flex--spacer--lgl_flex_spacer_lg
1.5rem
--pf-l-flex--spacer--mdl_flex_spacer_md
1rem
--pf-l-flex--spacer--nonel_flex_spacer_none
0
--pf-l-flex--spacer--sml_flex_spacer_sm
0.5rem
--pf-l-flex--spacer--xll_flex_spacer_xl
2rem
--pf-l-flex--spacer--xsl_flex_spacer_xs
0.25rem