---
sidebar_position: 2
---

import Paper from "@site/src/components/paper";
import { Flex, Box } from "rizzui";

# Flex

Flex is a layout component that allows you to create a FlexBox layout.

```tsx
import { Flex } from "rizzui";
```

<div className="mb-20" />

## Default

The style of **Flex** component. The **Flex** gets the default style of the css flex property.

<Paper>
  <Flex justify="center" align="center">
    <Box className="border border-muted rounded-md size-24 text-3xl font-semibold flex justify-center items-center shadow">
      1
    </Box>
    <Box className="border border-muted rounded-md size-24 text-3xl font-semibold flex justify-center items-center shadow">
      2
    </Box>
    <Box className="border border-muted rounded-md size-24 text-3xl font-semibold flex justify-center items-center shadow">
      3
    </Box>
  </Flex>
</Paper>

```tsx
import { Flex, Box } from "rizzui";

export default function App() {
  return (
    <Flex justify="center" align="center">
      <Box className="...">1</Box>
      <Box className="...">2</Box>
      <Box className="...">3</Box>
    </Flex>
  );
}
```

<div className="mb-20" />

## With Justify Content

The style of **Flex** component can be modified using the **justify** prop. The **justify** prop is used to change the position of flex items inside the flex box.

<Paper>
  <Flex justify="start">
    <Box className="border border-muted rounded-md size-24 text-3xl font-semibold flex justify-center items-center shadow">
      1
    </Box>
    <Box className="border border-muted rounded-md size-24 text-3xl font-semibold flex justify-center items-center shadow">
      2
    </Box>
    <Box className="ms-auto border border-muted rounded-md size-24 text-3xl font-semibold flex justify-center items-center shadow">
      3
    </Box>
  </Flex>
</Paper>

```tsx
import { Flex, Box } from "rizzui";

export default function App() {
  return (
    <>
      <Flex
      justify="start" // "center" | "start" | "end" | "between" | "around" | "evenly" | "normal"
      >
        <Box className="...">
          1
        </Box>
        <Box className="...">
          2
        </Box>
        <Box className="ms-auto...">
          3
        </Box>
    </Flex>
    <>
  );
}
```

<div className="mb-20" />

## With Align Items

The style of **Flex** component can be modified by using the **align** prop. The **align** prop is used to align the flex items inside the flex box.

<Paper>
  <Flex justify="center" align="center">
    <Box className="border border-muted rounded-md size-16 text-3xl font-semibold flex justify-center items-center shadow">
      1
    </Box>
    <Box className="border border-muted rounded-md size-20 text-3xl font-semibold flex justify-center items-center shadow">
      2
    </Box>
    <Box className="border border-muted rounded-md size-24 text-3xl font-semibold flex justify-center items-center shadow">
      3
    </Box>
  </Flex>
</Paper>

```tsx
import { Flex, Box } from "rizzui";

export default function App() {
  return (
    <>
      <Flex
        justify="center" // "center" | "start" | "end" | "between" | "around" | "evenly" | "normal"
        align="center" // "center" | "start" | "end" | "baseline" | "stretch"
      >
         <Box className="...">
          1
        </Box>
        <Box className="...">
          2
        </Box>
        <Box className="...">
          3
        </Box>
      </Flex>
    <>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Flex Props

Here is the API documentation of the **Flex** component. And the rest of the props are the same as the original html element. You can use props like **id**, **title**, **onClick** etc.

<div className="overflow-x-auto">

|   Props   |                 Type                  |                    Description                     |  Default  |
| :-------: | :-----------------------------------: | :------------------------------------------------: | :-------: |
|    as     |       `div` or any html element       |                     Render as                      |  `"div"`  |
| children  |           `React.ReactNode`           |        Accepts everything React can render         |   \_\_    |
| direction | [**Direction Type**](#direction-type) |      Defines the flex direction in a flex box      |  `"row"`  |
|  justify  |   [**Justify Type**](#justify-type)   | Defines the position of flex items inside flex box | `"start"` |
|   align   |     [**Align Type**](#align-type)     |               Aligns the flex items                | `"start"` |
|    gap    |       [**Gap Type**](#gap-type)       |     Defines the gap between columns in a grid      |   `"4"`   |
| className |               `string`                |        Add custom classes to the component         |   \_\_    |

</div>

<div className="mb-10" />

### Direction Type

```ts
type DirectionType = "col" | "row" | "row-reverse" | "col-reverse";
```

<div className="mb-10" />

### Justify Type

```ts
type JustifyType =
  | "center"
  | "start"
  | "end"
  | "between"
  | "around"
  | "evenly"
  | "normal";
```

<div className="mb-10" />

### Align Type

```ts
type AlignType = "center" | "start" | "end" | "baseline" | "stretch";
```

<div className="mb-10" />

### Gap Type

```ts
type GapType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12";
```
