Skip to Content
StylingDisplay

Display

Use display prop to control the display type of an element.

Name

Styles

block
flex
grid
inline
inline-block
inline-flex
none
table
table-cell
table-row

#

Documentation

#

Usage

01

02

03

04

import { Canvas } from "@/demos/Canvas";
import { Box } from "@optiaxiom/react";
 
export function App() {
  return (
    <Canvas asChild>
      <Box display="flex" gap="16" w="auto">
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
        <Box>04</Box>
      </Box>
    </Canvas>
  );
}

#

Responsive

import { Canvas } from "@/demos/Canvas";
import { Box } from "@optiaxiom/react";
 
export function App() {
  return (
    <Canvas asChild>
      <Box display={["none", "flex"]} gap="16" w="auto">
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
        <Box>04</Box>
      </Box>
    </Canvas>
  );
}
Last updated on
Align SelfFlex