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:
alignItemsisalignflexBasisisbasisflexDirectionisdirectionflexGrowisgrowflexShrinkisshrinkflexWrapiswrapjustifyContentisjustify
<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 |