Components

FlexNew: New

Guidelines

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.

Basic usage

First, import the component.

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

Then use it, like so:

Show code

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

Prop	Type	Default
`columnGap`	`enum`
`gap`	`enum`
`m`	`enum`
`margin`	`enum`
`marginBottom`	`enum`
`marginLeft`	`enum`
`marginRight`	`enum`
`marginTop`	`enum`
`marginX`	`enum`
`marginY`	`enum`
`mb`	`enum`
`ml`	`enum`
`mr`	`enum`
`mt`	`enum`
`mx`	`enum`
`my`	`enum`
`p`	`enum`
`padding`	`enum`
`paddingBottom`	`enum`
`paddingLeft`	`enum`
`paddingRight`	`enum`
`paddingTop`	`enum`
`paddingX`	`enum`
`paddingY`	`enum`
`pb`	`enum`
`pl`	`enum`
`pr`	`enum`
`pt`	`enum`
`px`	`enum`
`py`	`enum`
`rowGap`	`enum`

This component also accepts the following styled system props:

Prop	Type	Default
`alignContent`	`enum`
`alignItems`	`enum`
`alignSelf`	`enum`
`flex`	`enum`
`flexBasis`	`enum`
`flexDirection`	`enum`
`flexGrow`	`enum`
`flexShrink`	`enum`
`flexWrap`	`enum`
`justifyContent`	`enum`
`justifyItems`	`enum`
`justifySelf`	`enum`
`order`	`enum`

Box: A utility component for working with spacing.
Inline: A utility component for controlling horizontal layouts.
Stack: A utility component for controlling vertical layouts.

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page

FlexNew: New

Features

Basic usage

API reference

Related components