Flex

Flex represents a flexbox layout.

Usage

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

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

Composition

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

Examples

Styling

Use the csx property to add styles.

Fist

Second

Third

Semantic elements

By default, Flex renders a div element. You can customize it using the as prop.

<Flex as="section">
  ...
</Flex>

<Flex as="aside">
  ...
</Flex>

<Flex as="footer">
  ...
</Flex>

Spacer

You can combine Flex and FlexSpacer to adjust spacing.

ReferenceError: Box is not defined

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.

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	CSS.flexDirection	Same as flexDirection css property	🚫	-
wrap	CSS.flexWrap	Same as flexWrap css property	🚫	-
basis	CSS.flexBasis	Same as flexBasis css property	🚫	-
shrink	CSS.flexShrink	Same as flexShrink css property	🚫	-
grow	CSS.flexGrow	Same as flexGrow css property	🚫	-
align	CSS.alignItems	Same as alignItems css property	🚫	-
justify	CSS.justifyContent	Same as justifyContent css property	🚫	-
order	CSS.order	Same as order css property	🚫	-
csx	StyleObject	Layout styles	🚫	-

FlexSpacer

All props of div JSX element.

Name	Type	Description	Required	Default
csx	StyleObject	Layout styles	🚫	-