@atlaskit/primitives/constellation/flex/examples.mdx

Primitives are token-backed low-level building blocks.

---
title: Flex
description: A flex implements the CSS flexbox API.
order: 0
---

import FlexDirection from '../../examples/constellation/flex/direction';
import FlexAlignItems from '../../examples/constellation/flex/align-items';
import FlexJustifyContent from '../../examples/constellation/flex/justify-content';
import FlexWrap from '../../examples/constellation/flex/wrap';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
	name="@atlaskit/primitives"
	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
	directoryName="primitives"
/>

## Basic

The `Flex` component is a basic mapping to the CSS Flexbox API. It can be used as a less
richly-configured `Inline` or `Stack`. Like Stack and Inline, `Flex` exclusively supports
token-backed `gap` properties to ensure layouts using `Flex` match the Atlassian Design System
spacing scale.

<Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />

## Align items and justify content

`Flex` applies the `alignItems` and `justifyContent` properties to align content along its cross and
main axes respectively.

<Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />

## Wrap

Flex-prefixed properties in CSS do not have this prefix in the component API. For example,
`flex-wrap` is instead applied as the `wrap` property.

<Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />

## Direction

Flex direction is applied via the `direction` property.

<Example Component={FlexDirection} packageName="@atlaskit/primitives/flex" />