WUI logo

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 is align
  • flexBasis is basis
  • flexDirection is direction
  • flexGrow is grow
  • flexShrink is shrink
  • flexWrap is wrap
  • justifyContent is justify

<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 #

NameType(s)DefaultRequired
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

Packages #

Dependencies #
Peer dependencies #

Previous

Box

Next

Grid