Skip to Content
Patternfly Logo

Flex

The Flex layout is a tool to build your own custom layout that builds-in the PatternFly spacer and breakpoint systems. This enables developers to create a custom layout that can have consistent spacing and change responsively with other PatternFly layouts and components.

ExamplesPropsCSS Variables

Examples

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

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

Props

Flex properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullcontent rendered inside the Flex layout
classNamestringNo''additional classes added to the Flex layout
breakpointModsFlexBreakpointMod[]No[]An array of objects representing the various modifiers to apply to the flex component at various breakpoints

CSS Variables

.pf-l-flex--pf-l-flex--Displayl_flex_Display
flex
.pf-l-flex--pf-l-flex--FlexWrapl_flex_FlexWrap
wrap
.pf-l-flex--pf-l-flex--AlignItemsl_flex_AlignItems
baseline
.pf-l-flex--pf-l-flex--m-row--AlignItemsl_flex_m_row_AlignItems
baseline
.pf-l-flex--pf-l-flex--m-row-reverse--AlignItemsl_flex_m_row_reverse_AlignItems
baseline
.pf-l-flex--pf-l-flex--spacer-basel_flex_spacer_base
1rem
.pf-l-flex--pf-l-flex--spacerl_flex_spacer
1rem
.pf-l-flex--pf-l-flex--spacer--nonel_flex_spacer_none
0
.pf-l-flex--pf-l-flex--spacer--xsl_flex_spacer_xs
0.25rem
.pf-l-flex--pf-l-flex--spacer--sml_flex_spacer_sm
0.5rem
.pf-l-flex--pf-l-flex--spacer--mdl_flex_spacer_md
1rem
.pf-l-flex--pf-l-flex--spacer--lgl_flex_spacer_lg
1.5rem
.pf-l-flex--pf-l-flex--spacer--xll_flex_spacer_xl
2rem
.pf-l-flex--pf-l-flex--spacer--2xll_flex_spacer_2xl
3rem
.pf-l-flex--pf-l-flex--spacer--3xll_flex_spacer_3xl
4rem
.pf-l-flex:last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex > *--pf-l-flex--spacerl_flex_spacer
1rem
.pf-l-flex > *:last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-inline-flex--pf-l-flex--Displayl_flex_Display
inline-flex
.pf-l-flex.pf-m-space-items-none > *--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-none > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-xs > *--pf-l-flex--spacerl_flex_spacer
0.25rem
.pf-l-flex.pf-m-space-items-xs > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-sm > *--pf-l-flex--spacerl_flex_spacer
0.5rem
.pf-l-flex.pf-m-space-items-sm > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-md > *--pf-l-flex--spacerl_flex_spacer
1rem
.pf-l-flex.pf-m-space-items-md > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-lg > *--pf-l-flex--spacerl_flex_spacer
1.5rem
.pf-l-flex.pf-m-space-items-lg > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-xl > *--pf-l-flex--spacerl_flex_spacer
2rem
.pf-l-flex.pf-m-space-items-xl > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-2xl > *--pf-l-flex--spacerl_flex_spacer
3rem
.pf-l-flex.pf-m-space-items-2xl > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex.pf-m-space-items-3xl > *--pf-l-flex--spacerl_flex_spacer
4rem
.pf-l-flex.pf-m-space-items-3xl > :last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex .pf-m-spacer-none--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex .pf-m-spacer-none:last-child--pf-l-flex--spacerl_flex_spacer
0
.pf-l-flex .pf-m-spacer-xs--pf-l-flex--spacerl_flex_spacer
0.25rem
.pf-l-flex .pf-m-spacer-xs:last-child--pf-l-flex--spacerl_flex_spacer
0.25rem
.pf-l-flex .pf-m-spacer-sm--pf-l-flex--spacerl_flex_spacer
0.5rem
.pf-l-flex .pf-m-spacer-sm:last-child--pf-l-flex--spacerl_flex_spacer
0.5rem
.pf-l-flex .pf-m-spacer-md--pf-l-flex--spacerl_flex_spacer
1rem
.pf-l-flex .pf-m-spacer-md:last-child--pf-l-flex--spacerl_flex_spacer
1rem
.pf-l-flex .pf-m-spacer-lg--pf-l-flex--spacerl_flex_spacer
1.5rem
.pf-l-flex .pf-m-spacer-lg:last-child--pf-l-flex--spacerl_flex_spacer
1.5rem
.pf-l-flex .pf-m-spacer-xl--pf-l-flex--spacerl_flex_spacer
2rem
.pf-l-flex .pf-m-spacer-xl:last-child--pf-l-flex--spacerl_flex_spacer
2rem
.pf-l-flex .pf-m-spacer-2xl--pf-l-flex--spacerl_flex_spacer
3rem
.pf-l-flex .pf-m-spacer-2xl:last-child--pf-l-flex--spacerl_flex_spacer
3rem
.pf-l-flex .pf-m-spacer-3xl--pf-l-flex--spacerl_flex_spacer
4rem
.pf-l-flex .pf-m-spacer-3xl:last-child--pf-l-flex--spacerl_flex_spacer
4rem