Skip to Content
StylingFlex

Flex

Use flex prop to control how flex items grow and shrink.

Name

Styles

1
auto
initial
none

#

Documentation

  • initial: allow flex item to shrink but not grow, taking into account the initial size.
  • none: prevent flex items from shrinking or growing.
  • auto: allow flex items to grow and shrink taking into account the initial size.
  • 1: allow flex items to grow and shrink ignoring the initial size.
"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, theme } from "@optiaxiom/react";
 
export function App({
  flex = "1",
}: Pick<ComponentPropsWithoutRef<typeof Box>, "flex">) {
  return (
    <Box
      alignItems="center"
      display="flex"
      flexDirection="row"
      gap="16"
      h="224"
      rounded="md"
      style={stripes}
      w="full"
    >
      <DemoBox flex={flex} w="224">
        01
      </DemoBox>
      <DemoBox flex={flex} w="80">
        02
      </DemoBox>
    </Box>
  );
}
 
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>
  );
}
 
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",
};

#

Responsive

"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, theme } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box
      alignItems="center"
      display="flex"
      flexDirection="row"
      gap="16"
      h="224"
      rounded="md"
      style={stripes}
      w="full"
    >
      <DemoBox flex={["1", "none"]} w="224">
        01
      </DemoBox>
      <DemoBox w="80">02</DemoBox>
    </Box>
  );
}
 
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>
  );
}
 
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",
};
Last updated on
Align SelfFlex Direction