Flex

Used to manage layout placement via Flexbox properties.

• View on Github
• View Core API
• View on Figma

Anatomy

1. Flex Container
2. Flex Item

Import

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

Usage

Basic Example

Result

Loading...

Live Editor

function BasicExample() { const itemStyles = { backgroundColor: 'var(--ps-surface-medium)', height: '9rem', } return ( <Flex align="center" justify="space-evenly"> <FlexItem grow="1" style={itemStyles}> One </FlexItem> <FlexItem grow="1" style={itemStyles}> Two </FlexItem> <FlexItem grow="1" style={itemStyles}> Three </FlexItem> </Flex> ) }

function BasicExample() {
  const itemStyles = {
    backgroundColor: 'var(--ps-surface-medium)',
    height: '9rem',
  }
  return (
    <Flex align="center" justify="space-evenly">
      <FlexItem grow="1" style={itemStyles}>
        One
      </FlexItem>
      <FlexItem grow="1" style={itemStyles}>
        Two
      </FlexItem>
      <FlexItem grow="1" style={itemStyles}>
        Three
      </FlexItem>
    </Flex>
  )
}

Customizing

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>
    </Flex>
  )
}

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.

Behavior

There are no behavior patterns required for Flex.

API

Flex

Parameters

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.

FlexItem

Parameters

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.

Accessibility

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