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.
ExamplesDocumentationExamples
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 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
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, -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 |
