Flex

What is this?

A component that represents a flexbox layout.

Spacer

You can combine Flex and FlexSpacer to adjust spacing.

Flexbox layout shorthands

Flex provides a set of properties to help you building flexbox layouts.

Responsive Prop

To make it easy applying flexbox layouts, all props provided by Flex are Responsive Props.

Usage

import { Flex, FlexSpacer } from '@vtex/admin-ui'

function Example() {
  return (
    <Flex>
      <Flex justify="center" align="center">
        First
      </Flex>
      <FlexSpacer />
      <Flex justify="center" align="center">
        Second
      </Flex>
      <FlexSpacer />
      <Flex justify="center" align="center">
        Third
      </Flex>
    </Flex>
  )
}

Composition

Name	Description
Flex	The main wrapper with display: flex and helpful props that provides styles shorthand
FlexSpacer	Creates an adjustable space that tunes the spacing between child elements within Flex

Props

Flex

Besides the props listed bellow, you can use all the props accepted by the JSX element you defined with as, which is div by default.

Name	Type	Description	Required	Default
direction	ResponsiveProp<CSS.flexDirection>	Same as flexDirection css property	🚫	-
wrap	ResponsiveProp<CSS.flexWrap>	Same as flexWrap css property	🚫	-
basis	ResponsiveProp<CSS.flexBasis>	Same as flexBasis css property	🚫	-
shrink	ResponsiveProp<CSS.flexShrink>	Same as flexShrink css property	🚫	-
grow	ResponsiveProp<CSS.flexGrow>	Same as flexGrow css property	🚫	-
align	ResponsiveProp<CSS.alignItems>	Same as alignItems css property	🚫	-
justify	ResponsiveProp<CSS.justifyContent>	Same as justifyContent css property	🚫	-
order	ResponsiveProp<CSS.order>	Same as order css property	🚫	-
csx	StyleObject	Custom styles	🚫	-
as	HTMLElement	A valid HTMLElement in a string format	🚫	div

FlexSpacer

Extends all props of div JSX element.

Name	Type	Description	Required	Default
className	string	Custom styles	🚫	-

Accessibility

Be sure that you're using the correct semantic element and aria roles for the behavior you're implementing. You can use the WAI-ARIA Practices to help you.

• What is this?
• Spacer
• Flexbox layout shorthands
• Responsive Prop