Components
Flex
API Reference

API Reference

Flexbox layout

<Flex>
  <Button>Clear</Button>
  <Button variant="primary">Submit</Button>
</Flex>

Parameters

props

  • Type: @vtex/shoreline-components.FlexProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>

Props

align (optional)

CSS align-items

  • Type: csstype.Property.AlignItems

  • Default: 'stretch'

asChild (optional)

Children composition

  • Type: boolean

  • Default: false

basis (optional)

CSS flex-basis

  • Type: csstype.Property.FlexBasis<0 | string & { }>

  • Default: 'auto'

direction (optional)

CSS flex-direction

  • Type: csstype.Property.FlexDirection

  • Default: 'row'

gap (optional)

CSS Gap

  • Type: csstype.Property.Gap<0 | string & { }>

  • Default: '$space-gap'

grow (optional)

CSS flex-grow

  • Type: csstype.Property.FlexGrow

  • Default: 0

inline (optional)

Use inline-flex instead of flex

  • Type: boolean

  • Default: false

justify (optional)

CSS justify-content

  • Type: csstype.Property.JustifyContent

  • Default: 'flex-start'

order (optional)

CSS order

  • Type: csstype.Property.Order

  • Default: 0

shrink (optional)

CSS flex-shrink

  • Type: csstype.Property.FlexShrink

  • Default: 1

wrap (optional)

CSS flex-wrap

  • Type: csstype.Property.FlexWrap

  • Default: 'nowrap'

View source (opens in a new tab)

FlexGrid