Width
Use w
prop to control the width of an element.
Name | Value | Pixels |
|
---|---|---|---|
xs | 1.25rem | 20px | |
sm | 1.5rem | 24px | |
md | 2rem | 32px | |
lg | 2.5rem | 40px | |
xl | 3rem | 48px | |
0 | 0 | 0 | |
1 | 0.063rem | 1px | |
2 | 0.125rem | 2px | |
4 | 0.25rem | 4px | |
6 | 0.375rem | 6px | |
8 | 0.5rem | 8px | |
12 | 0.75rem | 12px | |
16 | 1rem | 16px | |
20 | 1.25rem | 20px | |
24 | 1.5rem | 24px | |
32 | 2rem | 32px | |
40 | 2.5rem | 40px | |
48 | 3rem | 48px | |
56 | 3.5rem | 56px | |
64 | 4rem | 64px | |
80 | 5rem | 80px | |
96 | 6rem | 96px | |
112 | 7rem | 112px | |
128 | 8rem | 128px | |
144 | 9rem | 144px | |
160 | 10rem | 160px | |
176 | 11rem | 176px | |
192 | 12rem | 192px | |
208 | 13rem | 208px | |
224 | 14rem | 224px | |
240 | 15rem | 240px | |
256 | 16rem | 256px | |
288 | 18rem | 288px | |
320 | 20rem | 320px | |
384 | 24rem | 384px | |
5xl | 5rem | 80px | |
1/2 | 50% | 50% | |
1/3 | 33.333333% | 33.333333% | |
2/3 | 66.666666% | 66.666666% | |
1/4 | 25% | 25% | |
2/4 | 50% | 50% | |
3/4 | 75% | 75% | |
auto | auto | auto | |
fit | fit-content | fit-content | |
full | 100% | 100% | |
max | max-content | max-content | |
min | min-content | min-content |
#
Documentation
#
#
Usage
#
w=320
w=256
w=192
w=160
w=128
import { Box, Flex } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Flex>
<Box w="320">w=320</Box>
<Box w="256">w=256</Box>
<Box w="192">w=192</Box>
<Box w="160">w=160</Box>
<Box w="128">w=128</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>
);
}