Flex
Box display set to flex with shorthand entries.
version
5.0.0-alpha.16
install
yarn add @welcome-ui/flex
usage
import { Flex } from '@welcome-ui/flex'
Usage #
With the Flex component use shorthand props:
alignItemsisalignflexBasisisbasisflexDirectionisdirectionflexGrowisgrowflexShrinkisshrinkflexWrapiswrapjustifyContentisjustify
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 |