# Flex

```tsx
import { Flex } from "@chakra-ui/react"

export const FlexBasic = () => {
  return (
    <Flex gap="4">
      <Box height="10" />
      <Box height="10" />
      <Box height="10" />
    </Flex>
  )
}

```

## 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

```tsx
import { Flex } from "@chakra-ui/react"

export const FlexWithDirection = () => {
  return (
    <Flex gap="4" direction="column">
      <Box height="10" />
      <Box height="10" />
      <Box height="10" />
    </Flex>
  )
}

```

### Align

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

```tsx
import { Flex } from "@chakra-ui/react"

export const FlexWithAlign = () => {
  return (
    <Flex gap="4" align="center">
      <Box height="4" />
      <Box height="8" />
      <Box height="10" />
    </Flex>
  )
}

```

### Justify

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

```tsx
import { Flex } from "@chakra-ui/react"

export const FlexWithJustify = () => {
  return (
    <Flex direction="column" gap="8">
      <Flex gap="4" justify="flex-start">
        <Box height="10" width="120px" />
        <Box height="10" width="120px">
          flex-start
        </Box>
        <Box height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="center">
        <Box height="10" width="120px" />
        <Box height="10" width="120px">
          center
        </Box>
        <Box height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="flex-end">
        <Box height="10" width="120px" />
        <Box height="10" width="120px">
          flex-end
        </Box>
        <Box height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="space-between">
        <Box height="10" width="120px" />
        <Box height="10" width="120px">
          space-between
        </Box>
        <Box height="10" width="120px" />
      </Flex>
    </Flex>
  )
}

```

### Order

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

```tsx
import { Flex } from "@chakra-ui/react"

export const FlexWithOrder = () => {
  return (
    <Flex gap="4">
      <Box height="10" order="1">
        1
      </Box>
      <Box height="10" order="3">
        2
      </Box>
      <Box height="10" order="2">
        3
      </Box>
    </Flex>
  )
}

```

### Auto Margin

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

```tsx
import { Flex } from "@chakra-ui/react"

export const FlexWithAutoMargin = () => {
  return (
    <Flex gap="4" justify="space-between">
      <Box height="10" width="40" />
      <Box height="10" width="40" marginEnd="auto" />
      <Box height="10" width="40" />
    </Flex>
  )
}

```

### 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.

```tsx
import { Box, Flex, Spacer } from "@chakra-ui/react"

export const FlexWithSpacer = () => {
  return (
    <Flex>
      <Box p="4" bg="red.400" color="white">
        Box 1
      </Box>
      <Spacer />
      <Box p="4" bg="green.400" color="white">
        Box 2
      </Box>
    </Flex>
  )
}

```

### Wrap

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

```tsx
import { Flex } from "@chakra-ui/react"

export const FlexWithWrap = () => {
  return (
    <Flex gap="4" wrap="wrap" maxW="500px">
      <Box height="10" width="200px" />
      <Box height="10" width="200px" />
      <Box height="10" width="200px" />
    </Flex>
  )
}

```

## Props

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| align | undefined | `SystemStyleObject['alignItems'] \| undefined` | undefined |
| justify | undefined | `SystemStyleObject['justifyContent'] \| undefined` | undefined |
| wrap | undefined | `SystemStyleObject['flexWrap'] \| undefined` | undefined |
| direction | undefined | `SystemStyleObject['flexDirection'] \| undefined` | undefined |
| basis | undefined | `SystemStyleObject['flexBasis'] \| undefined` | undefined |
| grow | undefined | `SystemStyleObject['flexGrow'] \| undefined` | undefined |
| shrink | undefined | `SystemStyleObject['flexShrink'] \| undefined` | undefined |
| inline | undefined | `boolean \| undefined` | undefined |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |