Workday Canvas
CTRL K

Flex

Flex is a low-level layout component that provides a common, ergonomic API for building one-dimensional layouts with CSS Flexbox.

v14.2.34
Sources
GitHubStorybook
Install
yarn add @workday/canvas-kit-react

Usage Guidance

Coming soon!

Examples

Basic Example

1
1
1
2
2
2
1
1
1
import * as React from 'react';
import {Flex} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  minHeight: 'xl',
  minWidth: '2rem',
  padding: 'xs',
};

export default () => (
  <Flex columnGap="xs">
    <Flex flexDirection="column" rowGap="xs" flex={1}>
      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
    </Flex>
    <Flex flexDirection="column" rowGap="xs" flex={2}>
      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
    </Flex>
    <Flex flexDirection="column" rowGap="xs" flex={1}>
      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
    </Flex>
  </Flex>
);

Flex vs. Box

Flex is built with Box and has access to all BoxProps. The main differences between Box and Flex are:

  • Flex is set to display: flex by default
  • The display prop is limited to flex and inline-flex
  • Flex has access to flex container style props.

In short, use Flex when you need a flex container to build one-directional layouts with CSS Flexbox, and use Box when you need a simple container. It’s also important to note that Flex has no real opinion about how to build layouts outside of the CSS Flexbox spec. This allows it to be composed into many different components.

Component API

Flex

Flex is the container component for creating one-dimensional layouts with CSS Flexbox. It has special style props that map to CSS Flexbox style properties to provide a common, ergonomic API for building layouts.

<Flex flexDirection="column" rowGap="xs">
  <div>Implicit flex item 1</div>
  <div>Implicit flex item 2</div>
  <div>Implicit flex item 3</div>
</Flex>

Props

Flex exposes flex container style props and Box style props.

Flex.Item

Flex.Item is a subcomponent of Flex. It is a Box component under the hood and exposes flex item style props that map to CSS Flexbox Item properties. This provides greater control over how child components render in your layout.

<Flex flexDirection="column" rowGap="xs">
  <Flex.Item flex={1}>First Item</Flex.Item>
  <Flex.Item flex={2}>Second Item</Flex.Item>
  <Flex.Item flex={1}>Third Item</Flex.Item>
</Flex>

Props

Flex.Item exposes flex item style props and Box style props.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.

FAQ Section

On this Page: