Flex | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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.

ui-extension-components-flex-child

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.

Usage examples

Horizontal layout

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.

flex-tiles-justify-between
justify={'between'}

 

flex-tiles-justify-around
justify={'around'}

 

ui-extrensions-layout-tile-justify-start
justify={'start'}

 

ui-extrensions-layout-tile-justify-center
justify={'center'}

 

ui-extrensions-layout-tile-justify-end
justify={'end'}

 

Wrap

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.

ui-extrensions-layout-tile-row-wrap

<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>

Vertical layout

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.

 

ui-extrensions-layout-tile-column-align-start
align={'start'}

 

ui-extrensions-layout-tile-column-align-center
align={'center'}

ui-extrensions-layout-tile-column-align-end
align={'end'}

Spacing

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.

flex-tiles-gap

<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>

Using Flex in 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. 

ui-extension-components-flex-child

<Flex direction={'row'} justify={'end'} wrap={'wrap'} gap={'small'} > <Tile>Left</Tile> <Tile>Right</Tile> <Flex direction={'column'}> <Tile>Bottom</Tile> </Flex> </Flex>

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.