Flex
Box display set to flex with shorthand entries.
version
4.1.2
install
yarn add @welcome-ui/flex
usage
import { Flex } from '@welcome-ui/flex'
Usage #
With the Flex component use shorthand props:
alignItems
isalign
flexBasis
isbasis
flexDirection
isdirection
flexGrow
isgrow
flexShrink
isshrink
flexWrap
iswrap
justifyContent
isjustify
<Flex justify={{ xs: 'center', md: 'space-between' }} align="center" wrap="wrap"><Box backgroundColor="sub.1" w={50} m="sm" h={50} /><Box backgroundColor="sub.2" w={50} m="sm" h={50} /><Box backgroundColor="sub.3" w={50} m="sm" h={50} /><Box backgroundColor="sub.4" w={50} m="sm" h={50} /><Box backgroundColor="sub.5" w={50} m="sm" h={50} /></Flex>
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
align | "-moz-initial" "inherit" "initial" "revert" "unset" string & {} "center" "end" "flex-end" "flex-start" "self-end" "self-start" "start" "baseline" "normal" "stretch" ThemeProp<AlignItems, Theme> same as alignItems | ||
justify | "right" "left" "-moz-initial" "inherit" "initial" "revert" "unset" string & {} "center" "end" "flex-end" "flex-start" "start" "normal" "stretch" "space-around" "space-between" "space-evenly" ThemeProp<JustifyContent, Theme> same as justifyContent | ||
wrap | "wrap" "-moz-initial" "inherit" "initial" "revert" "unset" "nowrap" "wrap-reverse" ThemeProp<FlexWrap, Theme> same as flexWrap | ||
direction | "row" "-moz-initial" "inherit" "initial" "revert" "unset" "column" "column-reverse" "row-reverse" ThemeProp<FlexDirection, Theme> same as flexDirection | ||
basis | string number string & {} ThemeProp<string | number | (string & {}), Theme> same as flexBasis | ||
grow | "-moz-initial" "inherit" "initial" "revert" "unset" string & {} number & {} ThemeProp<FlexGrow, Theme> same as flexGrow | ||
shrink | "-moz-initial" "inherit" "initial" "revert" "unset" string & {} number & {} ThemeProp<FlexShrink, Theme> same as flexShrink |