Skip to content
PatternFly logo

Flex

Examples

Basic

Display flex
Display inline flex

Direction

Flex row

Flex item 1
Flex item 2
Flex item 3

Flex row-reverse

Flex item 1
Flex item 2
Flex item 3

Flex column

Flex item 1
Flex item 2
Flex item 3

Flex column-reverse

Flex item 1
Flex item 2
Flex item 3

Justified content

Justify content flex-start

Flex item 1
Flex item 2
Flex item 3

Justify content flex-end

Flex item 1
Flex item 2
Flex item 3

Justify content center

Flex item 1
Flex item 2
Flex item 3

Justify content space-around

Flex item 1
Flex item 2
Flex item 3

Justify content space-between

Flex item 1
Flex item 2
Flex item 3

Aligned items

Align items flex-start

Flex item 1
Flex item 2
Flex item 3

Align items flex-end

Flex item 1
Flex item 2
Flex item 3

Align items center

Flex item 1
Flex item 2
Flex item 3

Align items baseline

Flex item 1
Flex item 2
Flex item 3

Align items stretch

Flex item 1
Flex item 2
Flex item 3

Aligned self

flex-start
center
flex end
baseline
stretch

Aligned content

Align content flex-start

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Align content flex-end

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Align content center

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Align content space-around

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Align content space-between

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Align content stretch

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Shrink

Flex shrink 0
Flex shrink 1

Grow

Flex grow 0
Flex grow 1

Basis and none

Flex basis 0
Flex basis auto
Flex basis none
Flex 1

Fill

Flex none
Flex fill

Wrap

Flex wrap

Flex item 1
Flex item 2
Flex item 3

Flex no wrap

Flex item 1
Flex item 2
Flex item 3

Flex wrap reverse

Flex item 1
Flex item 2
Flex item 3

Documentation

Overview

For these utilities to have effect, the parent element must be set to display: flex or display: inline-flex. Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, and -on-xl. Example .pf-u-flex-row-on-lg

Usage

Class
Applied to
Outcome
.pf-u-flex-direction-row{-on-[breakpoint]}
*
Sets flex-direction: row
.pf-u-flex-direction-row-reverse{-on-[breakpoint]}
*
Sets flex-direction: row-reverse
.pf-u-flex-direction-column{-on-[breakpoint]}
*
Sets flex-direction: column
.pf-u-flex-direction-column-reverse{-on-[breakpoint]}
*
Sets flex-direction: column-reverse
.pf-u-justify-content-flex-start{-on-[breakpoint]}
*
Sets justify-content: flex-start
.pf-u-justify-content-flex-end{-on-[breakpoint]}
*
Sets justify-content: flex-end
.pf-u-justify-content-center{-on-[breakpoint]}
*
Sets justify-content: center
.pf-u-justify-content-space-around{-on-[breakpoint]}
*
Sets justify-content: space-around
.pf-u-justify-content-space-between{-on-[breakpoint]}
*
Sets justify-content: space-between
.pf-u-align-items-flex-start{-on-[breakpoint]}
*
Sets align-items: flex-start
.pf-u-align-items-flex-end{-on-[breakpoint]}
*
Sets align-items: flex-start
.pf-u-align-items-center{-on-[breakpoint]}
*
Sets align-items: center
.pf-u-align-items-baseline{-on-[breakpoint]}
*
Sets align-items: baseline
.pf-u-align-items-stretch{-on-[breakpoint]}
*
Sets align-items: stretch
.pf-u-align-self-flex-start{-on-[breakpoint]}
*
Sets align-self: flex-start
.pf-u-align-self-flex-end{-on-[breakpoint]}
*
Sets align-self: flex-end
.pf-u-align-self-center{-on-[breakpoint]}
*
Sets align-self: center
.pf-u-align-self-baseline{-on-[breakpoint]}
*
Sets align-self: baseline
.pf-u-align-self-stretch{-on-[breakpoint]}
*
Sets align-self: stretch
.pf-u-align-content-flex-start{-on-[breakpoint]}
*
Sets align-content: flex-start
.pf-u-align-content-flex-end{-on-[breakpoint]}
*
Sets align-content: flex-end
.pf-u-align-content-center{-on-[breakpoint]}
*
Sets align-content: center
.pf-u-align-content-space-between{-on-[breakpoint]}
*
Sets align-content: space-between
.pf-u-align-content-space-around{-on-[breakpoint]}
*
Sets align-content: space-around
.pf-u-align-content-stretch{-on-[breakpoint]}
*
Sets align-content: stretch
.pf-u-flex-shrink{1 or 0}{-on-[breakpoint]}
*
Sets flex-shrink to 1 or 0
.pf-u-flex-grow{1 or 0}{-on-[breakpoint]}
*
Sets flex-grow to 1 or 0
.pf-u-flex-basis{0 or auto}{-on-[breakpoint]}
*
Sets flex-basis to 0 auto
.pf-u-flex-fill{-on-[breakpoint]}
*
Sets flex to 1 1 auto
.pf-u-flex-wrap{-on-[breakpoint]}
*
sets flex-wrap: wrap
.pf-u-flex-nowrap{-on-[breakpoint]}
*
sets flex-wrap: nowrap
.pf-u-flex-wrap-reverse{-on-[breakpoint]}
*
sets flex-wrap: wrap-reverse

View source on GitHub