Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

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 }

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.