React

Flex

ExamplesPropsCSS variables

Examples

Flex Basics

Basic flex

Copied to clipboard

Flex nesting

Copied to clipboard

Nested flex and items

Copied to clipboard

Flex Spacing

Individually spaced items (spacer=xs,sm,md,lg,xl,2xl,3xl)

Copied to clipboard

Flex with modified spacing (spaceItems=xl)

Copied to clipboard

Flex with modified spacing (spaceItems=none)

Copied to clipboard

Flex layout modifiers

Default flex layout

Copied to clipboard

Inline flex

Copied to clipboard

Adjusting width with grow (first group has prop canGrow and will occupy remaining available space)

Copied to clipboard

Adjusting width with flex-1

Copied to clipboard

Specifying column widths with flex-1, 2, and 3

Copied to clipboard

Column layout modifiers

Flex column layout

Copied to clipboard

Stacking flex elements

Copied to clipboard

Nesting flex elements in columns

Copied to clipboard

Responsive layout modifiers

Switching between flex-direction column and row at large breakpoint

Copied to clipboard

Controlling width of large text-filled flex item with flex-1

Copied to clipboard

Flex alignment

Aligning right, including when wrapped

Copied to clipboard

Align right on single item

Copied to clipboard

Align right on multiple groups

Copied to clipboard

Using flex-1 to align adjacent content

Copied to clipboard

Aligning nested columns with align-self-flex-end

Copied to clipboard

Aligning nested columns with align-self-center

Copied to clipboard

Aligning nested columns with align-self-baseline

Copied to clipboard

Aligning nested columns with align-self-stretch

Copied to clipboard

Flex justification

Justify content with justify-content-flex-end

Copied to clipboard

Justify content with justify-content-space-between

Copied to clipboard

Justify content with justify-content-flex-start

Copied to clipboard

Props

Flex props

The Flex component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Flex layout
classNamestring''additional classes added to the Flex layout
breakpointModsFlexBreakpointMod[][] as FlexBreakpointMod[]An array of objects representing the various modifiers to apply to the flex component at various breakpoints

CSS variables

--pf-l-flex--AlignItemsl_flex_AlignItemsbaseline
--pf-l-flex--Displayl_flex_Displayinline-flex
--pf-l-flex--FlexWrapl_flex_FlexWrapwrap
--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