Flex

Use Flex component to stack items vertically or horizontally. By default direction is set to column.

#
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="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="sm">01</Box>
        <Box p="md">02</Box>
        <Box p="sm">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>
  );
}