Flex
What is this?
A component that represents a flexbox layout.
Spacer
You can combine Flex and FlexSpacer to adjust spacing.
Loading...
Flexbox layout shorthands
Flex provides a set of properties to help you building flexbox layouts.
Loading...
Responsive Prop
To make it easy applying flexbox layouts, all props provided by Flex are Responsive Props.
Loading...
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.