Flex

Use Flex component to stack items vertically or horizontally.

#
Documentation

#
Usage


import { Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Flex>
        <div>01</div>
        <div>02</div>
        <div>03</div>
      </Flex>
    </Canvas>
  );
}

#
Direction

Use flexDirection prop to control whether children are stacked vertically or horizontally. By default flexDirection is set to column.

Use flexDirection="row" or flexDirection="row-reverse" to stack items horizontally:


import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Flex flexDirection="row">
        <Box p="12">01</Box>
        <Box p="16">02</Box>
        <Box p="12">03</Box>
      </Flex>
    </Canvas>
  );
}

Use flexDirection="column" or flexDirection="column-reverse" to stack items vertically:


import { Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Flex flexDirection="column">
        <div>01</div>
        <div>02</div>
        <div>03</div>
      </Flex>
    </Canvas>
  );
}

#
Gap

Use gap prop to control the gap between flex items.

Gap


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App({
  gap = "16",
}: Pick<ComponentPropsWithoutRef<typeof Flex>, "gap">) {
  return (
    <Canvas>
      <Flex flexDirection="row" gap={gap}>
        <Box p="12">01</Box>
        <Box p="16">02</Box>
        <Box p="12">03</Box>
      </Flex>
    </Canvas>
  );
}

#
Alignment

Use alignItems and justifyContent prop to control the layout and alignment of flex items.

Align items

Flex direction

Justify content


import type { ComponentPropsWithoutRef } from "react";
 
import { stripes } from "@/demos/stripes";
import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App({
  alignItems = "center",
  flexDirection = "row",
  justifyContent = "center",
}: Pick<
  ComponentPropsWithoutRef<typeof Flex>,
  "alignItems" | "flexDirection" | "justifyContent"
>) {
  return (
    <Canvas>
      <Flex
        alignItems={alignItems}
        flexDirection={flexDirection}
        h="224"
        justifyContent={justifyContent}
        rounded="md"
        style={stripes}
      >
        <Box p="12">01</Box>
        <Box p="16">02</Box>
        <Box p="12">03</Box>
      </Flex>
    </Canvas>
  );
}

#
Related

Box

Box is the base component for all our other components and provides a convenient way to use our design tokens and set element styles without having to write any custom CSS.

Grid

Use Grid component to place items in a grid using equal width columns.

#
Props

#
Flex

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
Changelog

#
0.1.0

Added component