StylingWidth

Width

Use w prop to control the width of an element.

Name

Value

Pixels

 

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

2/4

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>
  );
}
SizeFont Family