Flex

A flex implements the CSS flexbox API.

Examples Code Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`alignItems`
Description	Used to align children along the cross axis.
Type	`"center" \| "start" \| "end" \| "baseline" \| "stretch"`

`as`
Description	The DOM element to render as the Flex. Defaults to `div`.
Type	`"div" \| "dl" \| "li" \| "ol" \| "span" \| "ul"`

`children`
Required
Description	Elements to be rendered inside the Flex.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`columnGap`
Description	Represents the space between each child.
Type	`"space.0" \| "space.025" \| "space.050" \| "space.075" \| "space.100" \| "space.150" \| "space.200" \| "space.250" \| "space.300" \| "space.400" \| "space.500" \| "space.600" \| "space.800" \| "space.1000"`

`data-testid`
Description	`data-testid` is strictly controlled through the `testId` prop. This lets consumers know that this data attribute will not be applied.
Type	`never`

`direction`
Description	Represents the flex direction property of CSS flexbox.
Type	`"row" \| "column"`

`gap`
Description	Represents the space between each child.
Type	`"space.0" \| "space.025" \| "space.050" \| "space.075" \| "space.100" \| "space.150" \| "space.200" \| "space.250" \| "space.300" \| "space.400" \| "space.500" \| "space.600" \| "space.800" \| "space.1000"`

`justifyContent`
Description	Used to align children along the main axis.
Type	`"center" \| "start" \| "end" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"`

`ref`
Description	No description.
Type	`((instance: any) => void) \| RefObject<any>`

`role`
Description	Accessible role.
Type	`string`

`rowGap`
Description	Represents the space between each child.
Type	`"space.0" \| "space.025" \| "space.050" \| "space.075" \| "space.100" \| "space.150" \| "space.200" \| "space.250" \| "space.300" \| "space.400" \| "space.500" \| "space.600" \| "space.800" \| "space.1000"`

`testId`
Description	A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`wrap`
Description	Represents the flex wrap property of CSS flexbox.
Type	`"wrap" \| "nowrap"`

`xcss`
Description	Apply a subset of permitted styles powered by Atlassian Design System design tokens.
Type	`false \| (XCSSValue<"appearance" \| "color" \| "maxWidth" \| "grid" \| "borderColor" \| "clipPath" \| "filter" \| "marker" \| "mask" \| "height" \| "width" \| "translate" \| "content" \| "border" \| ... 487 more ... \| "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

Was this page helpful?

We use this feedback to improve our documentation.