Skip to Content
StylingWidth

Width

Use w prop to control the width of an element.

Name

Styles

2xs
xs
sm
md
lg
xl
3xl
0
10
12
16
20
24
32
40
48
56
64
80
224
384
1/2
1/3
1/4
2/3
3/4
auto
fit
full
max
min

#

Documentation

#

Usage

w=384

w=224

w=3xl

w=64

import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Flex>
        <Box display={["none", "block"]} w="384">
          w=384
        </Box>
        <Box w="224">w=224</Box>
        <Box w="3xl">w=3xl</Box>
        <Box w="64">w=64</Box>
      </Flex>
    </Canvas>
  );
}

#

Percentage

w=1/2

w=1/2

w=1/3

w=2/3

w=1/4

w=3/4

import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas w="full">
      <Flex flexDirection="row">
        <Box w="1/2">w=1/2</Box>
        <Box w="1/2">w=1/2</Box>
      </Flex>
 
      <Flex flexDirection="row">
        <Box w="1/3">w=1/3</Box>
        <Box w="2/3">w=2/3</Box>
      </Flex>
 
      <Flex display={["none", "flex"]} flexDirection="row">
        <Box w="1/4">w=1/4</Box>
        <Box w="3/4">w=3/4</Box>
      </Flex>
    </Canvas>
  );
}
Last updated on
SizeFont Family