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.
IntroductionFeaturesExamplesDocumentationCSS VariablesIntroduction
The flex layout is based on the CSS Flex properties where the layout determines how a flex item will grow or shrink to fit the space available in its container. The system relies on a default spacer value --pf-l-flex--spacer--base, whose value is --pf-global--spacer--md or 16px that is applied to flex items. By default, flex-wrap is set to wrap and align-items is set to baseline.
Default spacing
- Flex items (not last child):
margin-right: 16px. - Nested
.pf-l-flexcontainers (not last child):margin-right: 16px. .pf-m-columndirect descendants (not last child):margin-bottom: 16px..pf-m-columnnested.pf-l-flexcontainers (not last child):margin-bottom: 16px.
Features
.pf-l-flexis infinitely nestable and can be used to group items within..pf-m-spacer-{xs,sm,md,lg,xl,2xl,3xl}can be applied to parent or direct children and changes the spacer value for only the element to which it is applied. Responsive spacers can be used by appending{-on-[breakpoint]}to.pf-m-spacer-{size}. Example:.pf-m-spacer-lg-on-xl..pf-m-space-items-{xs,sm,md,lg,xl,2xl,3xl}can be applied to.pf-l-flexonly and changes the spacing of direct children only. Responsive spacers can be used by appending{-on-[breakpoint]}to.pf-m-space-items-{size}. Example:.pf-m-space-items-lg-on-xl.
Breakpoints
-on-sm, -on-md, -on-lg, -on-xl, -on-2xl.
Usefulness
- Use when content dictates layout and elements wrap when necessary.
- Use when a rigid grid is not necessary/wanted.
Differences from utility class
- It contains multiple css declarations and does not use the !important tag.
- It does not require wrapping elements in columns or rows.
- It breaks the dependency upon adding utility classes to each child.
- It can be applied to container elements or components.
Examples
Basic
Basic flex - .pf-l-flex.
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
The CSS approach, by keeping specificity low on base class properties and resetting css variable values at higher specificities, allows any spacer property to be overwritten with a single selector (specificity of 10 or greater).
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-l-flex | * | Initiates the flex layout. Required |
.pf-l-flex__item | .pf-l-flex > * | Initiates a flex item. Required |
Spacing
Individually spaced items - .pf-m-spacer-{xs,sm,md,lg,xl,2xl,3xl}.
Item - none
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
Applying .pf-m-spacer-{size} to direct descendants of .pf-l-flex will override css variable value.
Applying .pf-m-space-items-{size} to .pf-l-flex will override css variable values for direct descendants, excluding last child. This spacing can be overridden for direct descendant with .pf-m-spacer-{size}.
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or a flex item spacing. |
.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout direct descendant spacing. |
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-growand 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
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-inline-flex{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout display property to inline-flex. |
.pf-m-grow{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex-grow property to 1. |
.pf-m-shrink{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex-shrink property to 1. |
.pf-m-full-width{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex item to full width of parent. |
.pf-m-flex-1{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
.pf-m-flex-2{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
.pf-m-flex-3{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
.pf-m-flex-4{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
.pf-m-flex-default{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
.pf-m-flex-none{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to none. |
Column layout modifiers
Flex column layout. When .pf-m-columnis applied to .pf-l-flex, spacing will be applied to margin-bottom for direct descendants.
Flex item
Flex item
Flex item
Stacking .pf-l-flexelements.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Nesting .pf-l-flexelements and setting to .pf-m-column.
Flex item
Flex item
Flex item
Flex item
Flex item
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-column{-on-[breakpoint]} | .pf-l-flex | Modifies flex-direction property to column. |
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-1on 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
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-column{-on-[breakpoint]} | .pf-l-flex | Modifies flex-direction property to column. |
.pf-m-row{-on-[breakpoint]} | .pf-l-flex | Modifies flex-direction property to row. |
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-1to 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
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-align-right{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies margin-left property to auto. |
.pf-m-align-left{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Resets margin-left property 0. |
.pf-m-align-self-flex-start{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies align-self property to flex-start. |
.pf-m-align-self-flex-end{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies align-self property to flex-end. |
.pf-m-align-self-flex-center{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies align-self property to center. |
.pf-m-align-self-flex-baseline{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies align-self property to baseline. |
.pf-m-align-self-flex-stretch{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies align-self property to stretch. |
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
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-justify-content-flex-end{-on-[breakpoint]} | .pf-l-flex | Modifies justification property and descendant spacing. |
.pf-m-justify-content-flex-space-between{-on-[breakpoint]} | .pf-l-flex | Modifies justification property and descendant spacing. |
.pf-m-justify-content-flex-start{-on-[breakpoint]} | .pf-l-flex | Modifies justification property and descendant spacing, used primarily to reset spacing to default. |
Documentation
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-l-flex | * | Initiates the flex layout. Required |
.pf-l-flex__item | .pf-l-flex > * | Initiates a flex item. Required |
.pf-m-flex{-on-[breakpoint]} | .pf-l-flex | Initializes or resets the flex layout display property to flex. |
.pf-m-inline-flex{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout display property to inline-flex. |
.pf-m-grow{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex-grow property to 1. |
.pf-m-shrink{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex-shrink property to 1. |
.pf-m-full-width{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex item to full width of parent. |
.pf-m-flex-1{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
.pf-m-flex-2{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
.pf-m-flex-3{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
.pf-m-flex-4{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
.pf-m-flex-default{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
.pf-m-flex-none{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies a nested flex layout or flex item flex shorthand property to none. |
.pf-m-column-reverse{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout flex-direction property to column-reverse. |
.pf-m-row-reverse{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout flex-direction property to row-reverse. |
.pf-m-wrap{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout flex-wrap property to wrap. |
.pf-m-wrap-reverse{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout flex-wrap property to wrap-reverse. |
.pf-m-nowrap{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout flex-wrap property to nowrap. |
.pf-m-justify-content-flex-start{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout justify-content property to flex-start. |
.pf-m-justify-content-flex-end{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout justify-content property to flex-end. |
.pf-m-justify-content-center{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout justify-content property to center. |
.pf-m-justify-content-space-between{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout justify-content property to space-between. |
.pf-m-justify-content-space-around{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout justify-content property to space-around. |
.pf-m-justify-content-space-evenly{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout justify-content property to space-evenly. |
.pf-m-align-items-flex-start{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-items property to flex-start. |
.pf-m-align-items-flex-end{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-items property to flex-end. |
.pf-m-align-items-center{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-items property to center. |
.pf-m-align-items-stretch{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-items property to stretch. |
.pf-m-align-items-baseline{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-items property to baseline. |
.pf-m-align-content-flex-start{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-content property to flex-start. |
.pf-m-align-content-flex-end{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-content property to flex-end. |
.pf-m-align-content-center{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-content property to center. |
.pf-m-align-content-stretch{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-content property to stretch. |
.pf-m-align-content-space-between{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-content property to space-between. |
.pf-m-align-content-space-around{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout align-content property to space-around. |
.pf-m-align-left{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Resets the flex layout element margin-left property to 0. |
.pf-m-align-right{-on-[breakpoint]} | .pf-l-flex > .pf-l-flex, .pf-l-flex__item | Modifies the flex layout element margin-left property to auto. |
Spacer system
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]} | .pf-l-flex, .pf-l-flex > .pf-l-flex__item | Modifies a nested flex layout or a flex item spacing. |
.pf-m-item-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]} | .pf-l-flex | Modifies the flex layout direct descendant spacing. |
CSS Variables
| .pf-l-flex | --pf-l-flex--Display | flex | ||
| .pf-l-flex | --pf-l-flex--FlexWrap | wrap | ||
| .pf-l-flex | --pf-l-flex--AlignItems | baseline | ||
| .pf-l-flex | --pf-l-flex--m-row--AlignItems | baseline | ||
| .pf-l-flex | --pf-l-flex--m-row-reverse--AlignItems | baseline | ||
| .pf-l-flex | --pf-l-flex--spacer-base | 1rem | ||
| .pf-l-flex | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex | --pf-l-flex--spacer--none | 0 | ||
| .pf-l-flex | --pf-l-flex--spacer--xs | 0.25rem | ||
| .pf-l-flex | --pf-l-flex--spacer--sm | 0.5rem | ||
| .pf-l-flex | --pf-l-flex--spacer--md | 1rem | ||
| .pf-l-flex | --pf-l-flex--spacer--lg | 1.5rem | ||
| .pf-l-flex | --pf-l-flex--spacer--xl | 2rem | ||
| .pf-l-flex | --pf-l-flex--spacer--2xl | 3rem | ||
| .pf-l-flex | --pf-l-flex--spacer--3xl | 4rem | ||
| .pf-l-flex:last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex > * | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex > *:last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-inline-flex | --pf-l-flex--Display | inline-flex | ||
| .pf-l-flex.pf-m-space-items-none > * | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-none > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-xs > * | --pf-l-flex--spacer | 0.25rem | ||
| .pf-l-flex.pf-m-space-items-xs > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-sm > * | --pf-l-flex--spacer | 0.5rem | ||
| .pf-l-flex.pf-m-space-items-sm > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-md > * | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex.pf-m-space-items-md > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-lg > * | --pf-l-flex--spacer | 1.5rem | ||
| .pf-l-flex.pf-m-space-items-lg > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-xl > * | --pf-l-flex--spacer | 2rem | ||
| .pf-l-flex.pf-m-space-items-xl > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-2xl > * | --pf-l-flex--spacer | 3rem | ||
| .pf-l-flex.pf-m-space-items-2xl > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex.pf-m-space-items-3xl > * | --pf-l-flex--spacer | 4rem | ||
| .pf-l-flex.pf-m-space-items-3xl > :last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex .pf-m-spacer-none | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex .pf-m-spacer-none:last-child | --pf-l-flex--spacer | 0 | ||
| .pf-l-flex .pf-m-spacer-xs | --pf-l-flex--spacer | 0.25rem | ||
| .pf-l-flex .pf-m-spacer-xs:last-child | --pf-l-flex--spacer | 0.25rem | ||
| .pf-l-flex .pf-m-spacer-sm | --pf-l-flex--spacer | 0.5rem | ||
| .pf-l-flex .pf-m-spacer-sm:last-child | --pf-l-flex--spacer | 0.5rem | ||
| .pf-l-flex .pf-m-spacer-md | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex .pf-m-spacer-md:last-child | --pf-l-flex--spacer | 1rem | ||
| .pf-l-flex .pf-m-spacer-lg | --pf-l-flex--spacer | 1.5rem | ||
| .pf-l-flex .pf-m-spacer-lg:last-child | --pf-l-flex--spacer | 1.5rem | ||
| .pf-l-flex .pf-m-spacer-xl | --pf-l-flex--spacer | 2rem | ||
| .pf-l-flex .pf-m-spacer-xl:last-child | --pf-l-flex--spacer | 2rem | ||
| .pf-l-flex .pf-m-spacer-2xl | --pf-l-flex--spacer | 3rem | ||
| .pf-l-flex .pf-m-spacer-2xl:last-child | --pf-l-flex--spacer | 3rem | ||
| .pf-l-flex .pf-m-spacer-3xl | --pf-l-flex--spacer | 4rem | ||
| .pf-l-flex .pf-m-spacer-3xl:last-child | --pf-l-flex--spacer | 4rem | ||
