Flex

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

import { Flex } from "rizzui";

Default

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

1

2

3

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>
  );
}

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.

1

2

3

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>
    <>
  );
}

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.

1

2

3

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>
    <>
  );
}

API Reference

---

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.

Props	Type	Description	Default
as	div or any html element	Render as	"div"
children	React.ReactNode	Accepts everything React can render	__
direction	Direction Type	Defines the flex direction in a flex box	"row"
justify	Justify Type	Defines the position of flex items inside flex box	"start"
align	Align Type	Aligns the flex items	"start"
gap	Gap Type	Defines the gap between columns in a grid	"4"
className	string	Add custom classes to the component	__

Direction Type

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

Justify Type

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

Align Type

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

Gap Type

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