# Flex

A utility component for creating flex layouts

## Features

- Control the space between children.

- Control the alignment of children.

- Control the orientation of children.

- Adheres to our [spacing tokens](/foundations/spacing/spacing.overview).

## Basic usage

First, import the component.

```tsx
import {Flex} from '@pleo-io/telescope'
```

Then use it, like so:

```tsx
<Flex gap={24} flexWrap="wrap" css={{width: '235px'}}>
    <Placeholder width={40} />
    <Placeholder width={40} />
    <Placeholder width={40} />
    <Placeholder width={40} />
    <Placeholder width={40} />
    <Placeholder width={40} />
</Flex>
```

## API reference

The component accepts the following props.

#### `columnGap`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

The space between each column. Default 0.

#### `gap`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

The space between each item. Default 0. Shorthand for `columnGap` and `rowGap`.

#### `m`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top, left, bottom and right

#### `margin`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top, left, bottom and right

#### `marginBottom`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on bottom

#### `marginLeft`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left

#### `marginRight`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on right

#### `marginTop`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top

#### `marginX`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left and right

#### `marginY`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top and bottom

#### `mb`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on bottom

#### `ml`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left

#### `mr`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on right

#### `mt`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top

#### `mx`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left and right

#### `my`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top and bottom

#### `p`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top, left, bottom and right

#### `padding`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top, left, bottom and right

#### `paddingBottom`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on bottom

#### `paddingLeft`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left

#### `paddingRight`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on right

#### `paddingTop`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top

#### `paddingX`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left and right

#### `paddingY`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top and bottom

#### `pb`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on bottom

#### `pl`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left

#### `pr`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on right

#### `pt`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top

#### `px`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left and right

#### `py`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top and bottom

#### `rowGap`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

The space between each row. Default 0.

This component also accepts the following [styled system](https://github.com/styled-system/styled-system) props:

#### `alignContent`

Type: `ResponsiveValue<AlignContent, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"center"`
- `"end"`
- `"baseline"`
- `"start"`
- `"space-around"`
- `"space-between"`
- `"space-evenly"`
- `"stretch"`
- `"flex-end"`
- `"flex-start"`
- `"normal"`
- `(AlignContent | null)[]`
- `{ [x: string]: AlignContent | undefined; [x: number]: AlignContent | undefined; }`
- `Any other valid CSS value`

Default: -

The CSS align-content property sets how the browser distributes space between and around content items along the cross-axis of a flexbox container, and the main-axis of a grid container.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)

#### `alignItems`

Type: `ResponsiveValue<AlignItems, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"center"`
- `"end"`
- `"baseline"`
- `"start"`
- `"stretch"`
- `"flex-end"`
- `"flex-start"`
- `"normal"`
- `"self-end"`
- `"self-start"`
- `"anchor-center"`
- `(AlignItems | null)[]`
- `{ [x: string]: AlignItems | undefined; [x: number]: AlignItems | undefined; }`
- `Any other valid CSS value`

Default: -

The CSS align-items property sets the align-self value on all direct children as a group. The align-self property sets the alignment of an item within its containing block.

In Flexbox it controls the alignment of items on the Cross Axis, in Grid Layout it controls the alignment of items on the Block Axis within their grid area.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)

#### `alignSelf`

Type: `ResponsiveValue<AlignSelf, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"center"`
- `"auto"`
- `"end"`
- `"baseline"`
- `"start"`
- `"stretch"`
- `"flex-end"`
- `"flex-start"`
- `"normal"`
- `"self-end"`
- `"self-start"`
- `"anchor-center"`
- `(AlignSelf | null)[]`
- `{ [x: string]: AlignSelf | undefined; [x: number]: AlignSelf | undefined; }`
- `Any other valid CSS value`

Default: -

The align-self CSS property aligns flex items of the current flex line overriding the align-items value.

If any of the item's cross-axis margin is set to auto, then align-self is ignored. In Grid layout align-self aligns the item inside the grid area.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)

#### `flex`

Type: `ResponsiveValue<Flex<TLengthStyledSystem>, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `string`
- `number`
- `number & {}`
- `(Flex<TLengthStyledSystem> | null)[]`
- `{ [x: string]: Flex<TLengthStyledSystem> | undefined; [x: number]: Flex<TLengthStyledSystem> | undefined; }`
- `Any other valid CSS value`

Default: -

The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container. This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)

#### `flexBasis`

Type: `ResponsiveValue<FlexBasis<TLengthStyledSystem>, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `string`
- `number`
- `(FlexBasis<TLengthStyledSystem> | null)[]`
- `{ [x: string]: FlexBasis<TLengthStyledSystem> | undefined; [x: number]: FlexBasis<TLengthStyledSystem> | undefined; }`
- `Any other valid CSS value`

Default: -

No description available

#### `flexDirection`

Type: `ResponsiveValue<FlexDirection, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"inherit"`
- `"row"`
- `"-moz-initial"`
- `"initial"`
- `"revert"`
- `"revert-layer"`
- `"unset"`
- `"column"`
- `"column-reverse"`
- `"row-reverse"`
- `(FlexDirection | null)[]`
- `{ [x: string]: FlexDirection | undefined; [x: number]: FlexDirection | undefined; }`

Default: -

The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)

#### `flexGrow`

Type: `ResponsiveValue<FlexGrow, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `number & {}`
- `(FlexGrow | null)[]`
- `{ [x: string]: FlexGrow | undefined; [x: number]: FlexGrow | undefined; }`
- `Any other valid CSS value`

Default: -

The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)

#### `flexShrink`

Type: `ResponsiveValue<FlexShrink, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `number & {}`
- `(FlexShrink | null)[]`
- `{ [x: string]: FlexShrink | undefined; [x: number]: FlexShrink | undefined; }`
- `Any other valid CSS value`

Default: -

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)

#### `flexWrap`

Type: `ResponsiveValue<FlexWrap, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"inherit"`
- `"-moz-initial"`
- `"initial"`
- `"revert"`
- `"revert-layer"`
- `"unset"`
- `"nowrap"`
- `"wrap"`
- `"wrap-reverse"`
- `(FlexWrap | null)[]`
- `{ [x: string]: FlexWrap | undefined; [x: number]: FlexWrap | undefined; }`

Default: -

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)

#### `justifyContent`

Type: `ResponsiveValue<JustifyContent, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"center"`
- `"left"`
- `"end"`
- `"start"`
- `"right"`
- `"space-around"`
- `"space-between"`
- `"space-evenly"`
- `"stretch"`
- `"flex-end"`
- `"flex-start"`
- `"normal"`
- `(JustifyContent | null)[]`
- `{ [x: string]: JustifyContent | undefined; [x: number]: JustifyContent | undefined; }`
- `Any other valid CSS value`

Default: -

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

#### `justifyItems`

Type: `ResponsiveValue<JustifyItems, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"center"`
- `"left"`
- `"end"`
- `"baseline"`
- `"start"`
- `"right"`
- `"stretch"`
- `"flex-end"`
- `"flex-start"`
- `"normal"`
- `"self-end"`
- `"self-start"`
- `"legacy"`
- `"anchor-center"`
- `(JustifyItems | null)[]`
- `{ [x: string]: JustifyItems | undefined; [x: number]: JustifyItems | undefined; }`
- `Any other valid CSS value`

Default: -

The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)

#### `justifySelf`

Type: `ResponsiveValue<JustifySelf, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `"center"`
- `"auto"`
- `"left"`
- `"end"`
- `"baseline"`
- `"start"`
- `"right"`
- `"stretch"`
- `"flex-end"`
- `"flex-start"`
- `"normal"`
- `"self-end"`
- `"self-start"`
- `"anchor-center"`
- `(JustifySelf | null)[]`
- `{ [x: string]: JustifySelf | undefined; [x: number]: JustifySelf | undefined; }`
- `Any other valid CSS value`

Default: -

The CSS justify-self property set the way a box is justified inside its alignment container along the appropriate axis.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)

#### `order`

Type: `ResponsiveValue<Order, Required<Theme<TLengthStyledSystem>>> | undefined`

##### Allowed values

- `null`
- `number & {}`
- `(Order | null)[]`
- `{ [x: string]: Order | undefined; [x: number]: Order | undefined; }`
- `Any other valid CSS value`

Default: -

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/order)

## Related components

- [Box](/components/web/box/box.guidelines): A utility component for working with spacing.
- [Inline](/components/web/inline/inline.guidelines): A utility component for controlling horizontal layouts.
- [Stack](/components/web/stack/stack.guidelines): A utility component for controlling vertical layouts.