data display

tooltiptab
flex

Basic usage

import {Flex} from "tuix-design"
copy
box1
box2
<Flex
<Box bg="blue" height={50}>
    <Center>box1</Center>
</Box>
<Box bg="blue" height={50}>
    <Center>box2</Center>
</Box>
</Flex>
copy

API

propstypestatusdefaultdescription
w0 - 24optional0Flex width using 24 grid system
hstring | numberoptionalautoFlex height
alignstart | end | centeroptionalstartalign content
justifystart | end | center | between | evenlyoptionalstartjustify content
colbooleanoptionalfalseflex column
reversebooleanoptionalfalseflex reverse
wrapbooleanoptionalfalseflex wrap
growbooleanoptionalfalseflex grow
shrinkbooleanoptionalfalseflex shrink
gapnumberoptional0flex gap in pixels
usageapi