Skip to content
Paste
UX Platform
Change the site theme
GitHub

Flex

A primitive component that can be used to build flexbox based elements and layouts.

Code ready:
Code done
Design assets:(n/a)
Documentation:
Documentation done
Peer review:
Peer review done
Version
2.0.4
Sources
Storybook
Import from
@twilio-paste/core/flex — or — @twilio-paste/flex

Guidelines#

Flex is a layout component that allows you to build flexbox based elements and layouts. These flexible elements and layouts allow your components to adapt to the available space or screen size.

About Flex#

Flex utilizes a simplified flexbox API that allows you more efficient ways to layout, align, and distribute space among elements in a container. The Flex API helps take the confusion out of using flexbox CSS properties, by giving you simple methods to change properties like flex, flex-direction, flex-wrap, and so on.

Flexible elements can adapt to fill space within the layout. This allows Flex to work well for product layouts or elements that change orientation, resize, stretch, or shrink.

The Flex API was created because flexbox can be a difficult CSS property to wrap your head around, which leads to confusion on how it all works. If you’d like to learn more about flexbox, the learning resources below provide further information:

Accessibility#

The Flex component is an all purpose component. By default, it has no accessibility concerns. If you use the Flex as a custom element, it is up to you to manage the resulting accessibility implications.

Examples#

Left area
Right area

Flex Properties#

Left area
Right area

Vertical Property#

Left area
Right area

Wrap Property#

Left area
Right area

Vertical Alignment Properties#

Left area
Right area

Horizontal Alignment Properties#

Left area
Right area

Composition Notes#

The Flex component is used to compose flexible layout experiences. Let's look at an example where we need to build a flexible content layout with two sidebars: its has a left sidebar, a content area, and a right sidebar. Here's how we’ll compose the flexible layout using Flex:

Left sidebar area
Content area
Right sidebar area

When to use Flex#

The Flex component should be used when a flexible layout is needed with a page layout or custom component layout.

Do

Use Flex to layout your page or custom component.

Don't

Use Flex to set margins or padding within layouts and components.

Do

Use Flex to build responsive experiences.

Don't

Use inline CSS or classNames to add styles that Flex can provide.


Usage Guide#

API#

Installation#

yarn add @twilio-paste/flex - or - yarn add @twilio-paste/core

Usage#

import {Flex} from '@twilio-paste/flex';
const Component = () => <Flex>Foo</Flex>;

Props#

PropTypeDescriptionDefault
as?keyof JSX.IntrinsicElementsA custom HTML tagdiv
display?string, ResponsiveValue<'flex', 'inline-flex'>Display property'flex'
basis?string, number, ResponsiveValue<string, number>Flex basis property
grow?boolean, number, ResponsiveValue<boolean, number>Flex grow property
shrink?string, number, ResponsiveValue<string, number>Flex shrink property
hAlignContent?string, number, ResponsiveValue<string, number>Horizontal alignment property
vAlignContent?string, number, ResponsiveValue<string, number>Vertical alignment property
vertical?boolean, number, ResponsiveValue<boolean, number>Flex direction property
wrap?boolean, number, ResponsiveValue<boolean, number>Flex wrap property
minWidthResponsiveValue<MinWidthOptions>Responsive Size Token Value or CSS property
widthResponsiveValue<WidthOptions>Responsive Size Token Value or CSS property
maxWidthResponsiveValue<MaxWidthOptions>Responsive Size Token Value or CSS property
heightResponsiveValue<Height>Responsive Size Token Value or CSS property
minHeightResponsiveValue<MinHeight>Responsive Size Token Value or CSS property
maxHeightResponsiveValue<MaxHeight>Responsive Size Token Value or CSS property
sizeWidth HeightResponsive Size Token Value or CSS proterty
marginResponsiveValue<SpaceOptions>Responsive spacing token
marginTopResponsiveValue<SpaceOptions>Responsive spacing token
marginRightResponsiveValue<SpaceOptions>Responsive spacing token
marginBottomResponsiveValue<SpaceOptions>Responsive spacing token
marginLeftResponsiveValue<SpaceOptions>Responsive spacing token
marginXResponsiveValue<SpaceOptions>Responsive spacing token
marginYResponsiveValue<SpaceOptions>Responsive spacing token
paddingResponsiveValue<SpaceOptions>Responsive spacing token
paddingTopResponsiveValue<SpaceOptions>Responsive spacing token
paddingRightResponsiveValue<SpaceOptions>Responsive spacing token
paddingBottomResponsiveValue<SpaceOptions>Responsive spacing token
paddingLeftResponsiveValue<SpaceOptions>Responsive spacing token
paddingXResponsiveValue<SpaceOptions>Responsive spacing token
paddingYResponsiveValue<SpaceOptions>Responsive spacing token

Black lives matter.