@workday/canvas-kit-docs/dist/mdx/react/layout/Flex.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
import Basic from './examples/Flex/Basic';

# Canvas Kit Flex

`Flex` is a low-level layout component that provides a common, ergonomic API for building
one-dimensional layouts with
[CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

<ExampleCodeBlock code={Basic} />

### 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.

```tsx
<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](/get-started/for-developers/documentation/style-props/#flex) 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](/get-started/for-developers/documentation/style-props/#flex-item) that map
to CSS Flexbox Item properties. This provides greater control over how child components render in
your layout.

```tsx
<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](/get-started/for-developers/documentation/style-props/#flex-item) and `Box`
style props.