Back to Chakra Ui

Flex

apps/www/content/docs/components/flex.mdx

0.3.0-beta1.2 KB
Original Source
<ExampleTabs name="flex-basic" />

Usage

jsx
import { Flex, Spacer } from "@chakra-ui/react"
jsx
<Flex>
  <div />
  <div />
</Flex>

Examples

Direction

Use the direction or flexDirection prop to change the direction of the flex

<ExampleTabs name="flex-with-direction" />

Align

Use the align or alignItems prop to align the children along the cross axis.

<ExampleTabs name="flex-with-align" />

Justify

Use the justify or justifyContent prop to align the children along the main axis.

<ExampleTabs name="flex-with-justify" />

Order

Use the order prop to change the order of the children.

<ExampleTabs name="flex-with-order" />

Auto Margin

Apply margin to a flex item to push it away from its siblings.

<ExampleTabs name="flex-with-auto-margin" />

Spacer

Use the Spacer component to create flexible space between flex items. It will expand to fill all available space, pushing items to opposite ends.

<ExampleTabs name="flex-with-spacer" />

Wrap

Use the wrap or flexWrap prop to wrap the children when they overflow the parent.

<ExampleTabs name="flex-with-wrap" />

Props

<PropTable component="Flex" part="Flex" />