Skip to main content


Used to manage layout placement via Flexbox properties.


  1. Flex Container
  2. Flex Item


import { Flex, FlexItem } from '@pluralsight/react'


Basic Example

Live Editor


There are 3 ways to customize the Flex components.

1. Unused Classes

Each component layer of the Flex family has a unused class name that can be utilized in your local CSS to customize the Flex components at any level.

  1. pando-flex: The element of the Flex.
  2. pando-flex-item: The element of the FlexItem.

2. Passing a className prop

You can pass a className prop to the Flex components to customize Flex. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

Example of using CSS Modules to customize Flex.
import customStyles from './customStyles.module.css'

function CustomFlex(props) {
return (
<Flex className={customStyles.custom}>
<FlexItem className={customStyles.customItem}>One</FlexItem>

3. Ejected Flex

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Flex however you prefer while keeping the accessibility behavior.

import { getFlexProps, getFlexItemProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.


There are no behavior patterns required for Flex.




interface FlexOptions extends HTMLAttributes<HTMLDivElement> {
align?: CSS.Property.AlignItems
direction?: FlexDirection
justify?: CSS.Property.JustifyContent
gap?: number
wrap?: CSS.Property.FlexWrap
  1. align: The align-items property of the Flex.
  2. direction: The flex-direction property of the Flex.
  3. justify: The justify-content property of the Flex.
  4. gap: The gap property of the Flex.
  5. wrap: The flex-wrap property of the Flex.



interface FlexItemOptions extends HTMLAttributes<HTMLDivElement> {
basis?: CSS.Property.FlexBasis
grow?: CSS.Property.FlexGrow
shrink?: CSS.Property.FlexShrink
  1. basis: The flex-basis property of the FlexItem.
  2. grow: The flex-grow property of the FlexItem.
  3. shrink: The flex-shrink property of the FlexItem.


The Pando Flex APIs allow the Badge to be fully accessible and screen-readable by default.