Skip to Content
StylingFlex

Flex

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

Name

Styles

1
auto
initial
none

#

Documentation

#

Usage

  • 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 { Canvas } from "@/demos/Canvas";
import { Box, Flex } from "@optiaxiom/react";
 
export function App({
  flex = "1",
}: Pick<ComponentPropsWithoutRef<typeof Flex>, "flex">) {
  return (
    <Canvas asChild striped>
      <Flex flexDirection="row" h="224">
        <Box flex={flex} w="224">
          01
        </Box>
        <Box flex={flex} w="80">
          02
        </Box>
      </Flex>
    </Canvas>
  );
}

#

Responsive

"use client";
 
import { Canvas } from "@/demos/Canvas";
import { Box, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Canvas asChild striped>
      <Flex flexDirection="row" h="224">
        <Box flex={["1", "none"]} w="224">
          01
        </Box>
        <Box w="80">02</Box>
      </Flex>
    </Canvas>
  );
}
Last updated on
DisplayFlex Direction