Flex
Box display set to flex with shorthand entries.
version
5.0.0
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
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
align | "center" "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "end" "flex-end" "flex-start" "self-end" "self-start" "start" "baseline" "normal" "stretch" string & {} ThemeProp<AlignItems, Theme> same as alignItems | ||
justify | "right" "left" "center" "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "end" "flex-end" "flex-start" "start" "normal" "stretch" string & {} "space-around" "space-between" "space-evenly" ThemeProp<JustifyContent, Theme> same as justifyContent | ||
wrap | "wrap" "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "nowrap" "wrap-reverse" ThemeProp<FlexWrap, Theme> same as flexWrap | ||
direction | "row" "-moz-initial" "inherit" "initial" "revert" "revert-layer" "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" "revert-layer" "unset" string & {} number & {} ThemeProp<FlexGrow, Theme> same as flexGrow | ||
shrink | "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" string & {} number & {} ThemeProp<FlexShrink, Theme> same as flexShrink |