HTML

Flex layout system

ExamplesDocumentationCSS Variables

Examples

Flex basics

Basic flex - .pf-l-flex.

Flex item
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
Copied to clipboard

Flex spacing

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

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
Copied to clipboard

Flex 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
Copied to clipboard

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

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

Flex item
Flex item
Flex item
Flex item
Flex item

Adjusting width with .pf-m-flex-1. In this example, all direct descendants 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
Copied to clipboard

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
Copied to clipboard

Flex 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
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
Copied to clipboard

Flex 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
Copied to clipboard

Documentation

Modifiers

Class Applied to Outcome
.pf-m-flex{-on-[breakpoint]} .pf-l-flex Initializes or resets display property to flex.
.pf-m-inline-flex{-on-[breakpoint]} .pf-l-flex Modifies display property to inline-flex.
.pf-m-column-reverse{-on-[breakpoint]} .pf-l-flex Modifies flex-direction property to column-reverse.
.pf-m-row-reverse{-on-[breakpoint]} .pf-l-flex Modifies flex-direction property to row-reverse.
.pf-m-wrap{-on-[breakpoint]} .pf-l-flex Modifies flex-wrap property to wrap.
.pf-m-wrap-reverse{-on-[breakpoint]} .pf-l-flex Modifies flex-wrap property to wrap-reverse.
.pf-m-nowrap{-on-[breakpoint]} .pf-l-flex Modifies flex-wrap property to nowrap.
.pf-m-justify-content-flex-start{-on-[breakpoint]} .pf-l-flex Modifies justify-content property to flex-start.
.pf-m-justify-content-flex-end{-on-[breakpoint]} .pf-l-flex Modifies justify-content property to flex-end.
.pf-m-justify-content-center{-on-[breakpoint]} .pf-l-flex Modifies justify-content property to center.
.pf-m-justify-content-space-between{-on-[breakpoint]} .pf-l-flex Modifies justify-content property to space-between.
.pf-m-justify-content-space-around{-on-[breakpoint]} .pf-l-flex Modifies justify-content property to space-around.
.pf-m-justify-content-space-evenly{-on-[breakpoint]} .pf-l-flex Modifies justify-content property to space-evenly.
.pf-m-align-items-flex-start{-on-[breakpoint]} .pf-l-flex Modifies align-items property to flex-start.
.pf-m-align-items-flex-end{-on-[breakpoint]} .pf-l-flex Modifies align-items property to flex-end.
.pf-m-align-items-center{-on-[breakpoint]} .pf-l-flex Modifies align-items property to center.
.pf-m-align-items-stretch{-on-[breakpoint]} .pf-l-flex Modifies align-items property to stretch.
.pf-m-align-items-baseline{-on-[breakpoint]} .pf-l-flex Modifies align-items property to baseline.
.pf-m-align-content-flex-start{-on-[breakpoint]} .pf-l-flex Modifies align-content property to flex-start.
.pf-m-align-content-flex-end{-on-[breakpoint]} .pf-l-flex Modifies align-content property to flex-end.
.pf-m-align-content-center{-on-[breakpoint]} .pf-l-flex Modifies align-content property to center.
.pf-m-align-content-stretch{-on-[breakpoint]} .pf-l-flex Modifies align-content property to stretch.
.pf-m-align-content-space-between{-on-[breakpoint]} .pf-l-flex Modifies align-content property to space-between.
.pf-m-align-content-space-around{-on-[breakpoint]} .pf-l-flex Modifies align-content property to space-around.
.pf-m-align-left{-on-[breakpoint]} .pf-l-flex, .pf-l-flex > * Resets margin-left property to 0.
.pf-m-align-right{-on-[breakpoint]} .pf-l-flex, .pf-l-flex > * Modifies margin-left property to auto.

CSS Variables

--pf-l-flex--AlignItemsl_flex_AlignItemsbaseline
--pf-l-flex--Displayl_flex_Displayinline-flex
--pf-l-flex--FlexWrapl_flex_FlexWrapwrap
--pf-l-flex--flex--spacerl_flex_flex_spacer1.5rem
--pf-l-flex--m-row--AlignItemsl_flex_m_row_AlignItemsbaseline
--pf-l-flex--m-row-reverse--AlignItemsl_flex_m_row_reverse_AlignItemsbaseline
--pf-l-flex--spacerl_flex_spacer4rem
--pf-l-flex--spacer--2xll_flex_spacer_2xl3rem
--pf-l-flex--spacer--3xll_flex_spacer_3xl4rem
--pf-l-flex--spacer-basel_flex_spacer_base1rem
--pf-l-flex--spacer--lgl_flex_spacer_lg1.5rem
--pf-l-flex--spacer--mdl_flex_spacer_md1rem
--pf-l-flex--spacer--nonel_flex_spacer_none0
--pf-l-flex--spacer--sml_flex_spacer_sm0.5rem
--pf-l-flex--spacer--xll_flex_spacer_xl2rem
--pf-l-flex--spacer--xsl_flex_spacer_xs0.25rem