The Flex component renders an empty div container set to display=flex. When wrapped around other components, it enables those child components to be arranged using props. Flex can contain other Flex or Box components.
To see an example of how Flex and Box can be used for layout, check out HubSpot's Manage layouts: Flex and Box sample project.
import { Flex, Tile } from '@hubspot/ui-extensions';const Extension = () => { return ( <Flex direction={'row'} justify={'end'} wrap={'wrap'} gap={'small'}> <Tile>Left</Tile> <Tile>Right</Tile> <Flex direction={'column'}> <Tile>Bottom</Tile> </Flex> </Flex> );};| Prop | Type | Description |
|---|---|---|
direction | 'row' (default) | 'column' | Arranges the components horizontally or vertically by setting the main axis. |
justify | 'start' (default) | 'center' | 'end' | 'around' | 'between' | Distributes components along the main axis using the available free space. |
align | 'start' | 'center' | 'end' | 'baseline' | 'stretch' (default) | Distributes components along the cross-axis using the available free space. |
alignSelf | 'start' | 'center' | 'end' | 'baseline' | 'stretch' | Distributes a child component along the cross-axis using the available free space. Use this prop for nested Flex and Box components to align them differently from other child components in the Flex group. |
wrap | 'wrap' | 'nowrap' (default) | Whether components will wrap rather than trying to fit on one line. |
gap | 'flush' (default) | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | Sets the spacing between components. |
To arrange components horizontally, set direction to row. Then, use justify to configure the horizontal distribution. By default, components will stretch across the container if justify is not specified.
 |
justify={'between'} |
|
justify={'around'} |
|
justify={'start'} |
|
justify={'center'} |
|
justify={'end'} |
By default, components in a row will be arranged on one line when possible. Use the wrap prop to wrap components onto new lines when needed.
xxxxxxxxxx<Flex direction={'row'} justify={'between'} wrap={'wrap'} gap={'medium'}> <Tile>One</Tile> <Tile>Two</Tile> <Tile>Three</Tile> <Tile>Four</Tile> <Tile>Five</Tile> <Tile>Six</Tile> <Tile>Seven</Tile> <Tile>Eight</Tile></Flex>To arrange components vertically, set direction to column, then use the align prop to distribute them. By default, components will stretch across the extension container width when align is not specified.
 |
align={'start'} |
|
align={'center'} |
|
align={'end'} |
In the Flex component, you can use the gap prop to apply even spacing between the tiles. This prop will apply spacing equally for both row and column directions.
xxxxxxxxxx<Flex direction={'row'} justify={'start'} gap={'flush' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'}> <Tile>Tile 1</Tile> <Tile>Tile 2</Tile> <Tile>Tile 3</Tile></Flex>You can wrap child Flex components with Flex to set more specific rules for individual components. A child Flex component will not inherit props specified in the parent Flex component, so you'll need to repeat any props you've previously defined to maintain them.
xxxxxxxxxx<Flex direction={'row'} justify={'end'} wrap={'wrap'} gap={'small'}> <Tile>Left</Tile> <Tile>Right</Tile> <Flex direction={'column'}> <Tile>Bottom</Tile> </Flex></Flex>