Flex

Use Flex component to stack items vertically or horizontally.

Want to skip the docs? Try our MCP Server

Flex has been deprecated in favor of the new Group component which uses CSS-standard defaults. See the Group component and migration guide.

#
Documentation

#
Usage


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex w="full">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
    </Flex>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row" w="full">
      <DemoBox p="12">01</DemoBox>
      <DemoBox p="16">02</DemoBox>
      <DemoBox p="12">03</DemoBox>
    </Flex>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

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


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex w="full">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
    </Flex>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Gap

Use gap prop to control the gap between flex items.

Gap


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Flex } from "@optiaxiom/react";
 
export function App({
  gap = "16",
}: Pick<ComponentPropsWithoutRef<typeof Flex>, "gap">) {
  return (
    <Flex flexDirection="row" gap={gap} w="full">
      <DemoBox p="12">01</DemoBox>
      <DemoBox p="16">02</DemoBox>
      <DemoBox p="12">03</DemoBox>
    </Flex>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Alignment

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

The Flex component provides smart alignItems defaults:

When flexDirection="column": defaults to alignItems="stretch"
When flexDirection="row": defaults to alignItems="center"

Align items

Flex direction

Justify content


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Flex, theme } from "@optiaxiom/react";
 
export function App({
  alignItems = "center",
  flexDirection = "row",
  justifyContent = "center",
}: Pick<
  ComponentPropsWithoutRef<typeof Flex>,
  "alignItems" | "flexDirection" | "justifyContent"
>) {
  return (
    <Flex
      alignItems={alignItems}
      flexDirection={flexDirection}
      h="224"
      justifyContent={justifyContent}
      rounded="md"
      style={stripes}
      w="full"
    >
      <DemoBox p="12">01</DemoBox>
      <DemoBox p="16">02</DemoBox>
      <DemoBox p="12">03</DemoBox>
    </Flex>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}
 
const stripes = {
  backgroundColor: theme.colors["bg.secondary"],
  backgroundImage: `
    linear-gradient(
      135deg,
      ${theme.colors["bg.avatar.neutral"]} 10%,
      transparent 0,
      transparent 50%,
      ${theme.colors["bg.avatar.neutral"]} 0,
      ${theme.colors["bg.avatar.neutral"]} 60%,
      transparent 0,
      transparent
    )
  `,
  backgroundSize: "7px 7px",
};

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

Group

A flexbox layout component for grouping items horizontally or vertically.

#
Props

#
Flex

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

Prop
`alignItems` Set the element’s `align-items` CSS property. Defaults to `center` when `flexDirection='row'`, and `stretch` when `flexDirection='column'`. `ResponsiveValue<"normal" \| "stretch" \| "center" \| "end" \| "start">`
`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`
`display` Set the element’s `display` CSS property `ResponsiveValue<typeof styling.display>` Default: `flex`
`flexDirection` Set the element’s `flex-direction` CSS property. ⚠️ DEFAULTS TO ‘column’ (vertical stacking) - NOT ‘row’ like standard CSS! Default: ‘column’ For horizontal layouts: explicitly set flexDirection=‘row’ When direction is ‘row’, alignItems defaults to ‘center’ When direction is ‘column’, alignItems defaults to ‘stretch’ `ResponsiveValue<"column" \| "column-reverse" \| "row" \| "row-reverse">` Default: `column`
`gap` Set the element’s `gap` CSS property `ResponsiveValue<typeof styling.gap>` Default: `16`