Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Flex

Version 8.1.0GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/flex - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Flex} from '@twilio-paste/core/flex';

const Component = () => <Flex>Foo</Flex>;

Props

Props page anchor

Flex

Flex page anchor

as

Type
keyof IntrinsicElements
Default
'div'

basis

Type
| string | number | (BasisOptions | null)[] | { [x: string]: BasisOptions | undefined [x: number]: BasisOptions | undefined }

display

Responsive style prop for the CSS display property

Type
| "flex" | "inline-flex" | (DisplayOptions | null)[] | { [x: string]: DisplayOptions | undefined [x: number]: DisplayOptions | undefined }
Default
'flex'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FLEX'

grow

Type
| number | boolean | (GrowOptions | null)[] | { [x: string]: GrowOptions | undefined [x: number]: GrowOptions | undefined }

hAlignContent

Type
| "center" | "right" | "left" | "around" | "between" | (HorizontalAlignOptions | null)[] | { [x: string]: HorizontalAlignOptions | undefined [x: number]: HorizontalAlignOptions | undefined }

height

Responsive style prop of Size Tokens for for the CSS height property

Type
| string | number | (string & {}) | (HeightOptions | null)[] | { [x: string]: HeightOptions; [x: number]: HeightOptions }

margin

Responsive prop of Space tokens for the CSS margin property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginBottom

Responsive prop of Space tokens for the CSS margin-bottom property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginLeft

Responsive prop of Space tokens for the CSS margin-left property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginRight

Responsive prop of Space tokens for the CSS margin-right property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginTop

Responsive prop of Space tokens for the CSS margin-top property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginX

Responsive prop of Space tokens for the CSS margin-left and margin-right properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginY

Responsive prop of Space tokens for the CSS margin-top and margin-bottom properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

maxHeight

Responsive style prop of Size Tokens for for the CSS max-height property

Type
| string | number | (string & {}) | (MaxHeightOptions | null)[] | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }

maxWidth

Responsive style prop of Size Tokens for for the CSS max-width property

Type
| string | number | (string & {}) | (MaxWidthOptions | null)[] | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }

minHeight

Responsive style prop of Size Tokens for for the CSS min-height property

Type
| string | number | (string & {}) | (MinHeightOptions | null)[] | { [x: string]: MinHeightOptions; [x: number]: MinHeightOptions }

minWidth

Responsive style prop of Size Tokens for for the CSS min-width property

Type
| string | number | (string & {}) | (MinWidthOptions | null)[] | { [x: string]: MinWidthOptions; [x: number]: MinWidthOptions }

overflow

Type
| Overflow | (Overflow | null | undefined)[] | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }

overflowX

Type
| OverflowX | (OverflowX | null | undefined)[] | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }

overflowY

Type
| OverflowY | (OverflowY | null | undefined)[] | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }

padding

Responsive prop of Space tokens for the CSS padding property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingBottom

Responsive prop of Space tokens for the CSS padding-bottom property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingLeft

Responsive prop of Space tokens for the CSS padding-left property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingRight

Responsive prop of Space tokens for the CSS padding-right property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingTop

Responsive prop of Space tokens for the CSS padding-top property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingX

Responsive prop of Space tokens for the CSS padding-left and padding-right properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingY

Responsive prop of Space tokens for the CSS padding-top and padding-bottom properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

shrink

Type
| number | boolean | (ShrinkOptions | null)[] | { [x: string]: ShrinkOptions | undefined [x: number]: ShrinkOptions | undefined }

size

Responsive style prop of Size Tokens for for the CSS width and height properties

Type
string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions; } | (HeightOptions | null)[] | { ...; }

vAlignContent

Type
| "center" | "top" | "bottom" | "stretch" | (VerticalAlignOptions | null)[] | { [x: string]: VerticalAlignOptions | undefined [x: number]: VerticalAlignOptions | undefined }

vertical

Type
| boolean | (boolean | null)[] | { [x: string]: boolean | undefined; [x: number]: boolean | undefined }

width

Responsive style prop of Size Tokens for the CSS width property

Type
| string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions }

wrap

Type
| boolean | (boolean | null)[] | { [x: string]: boolean | undefined; [x: number]: boolean | undefined }