Flex

Flex is a component that allows you to create a flexible one-dimensional layout.

Basic Usage

Horizontal layout:

                                                
                                                <Flex>
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </Flex>

Horizontal reversed layout:

                                                
                                                <Flex direction="horizontal-reversed">
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </Flex>

Vertical layout:

                                                
                                                <Flex direction="vertical">
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </div>

Usage with a list:

                                                
                                                <Flex elementType="ul" direction="vertical">
                                                  <li>Item 1</li>
                                                  <li>Item 2</li>
                                                  <li>Item 3</li>
                                                </Flex>

ℹ️ For the horizontal layout, the Flex component uses the display: flex CSS property. For the vertical layout, display: grid is used because of technical advantages: better overflow control or alignment API consistency.

Inline Layout

Use the isInline prop to render the Flex container as an inline-level box. For horizontal layouts, this sets display: inline-flex. For vertical layouts, this sets display: inline-grid.

                                                
                                                <Flex isInline>
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                </Flex>

Responsive Direction

To create a responsive layout, pass an object as the value for the direction property, using breakpoint keys to specify different layouts for each screen size.

                                                
                                                <Flex direction={{ mobile: 'vertical', tablet: 'horizontal' }}>
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </Flex>

Wrapping

By default, Flex items will not wrap. To enable wrapping on all breakpoints, use the isWrapping prop.

                                                
                                                <Flex isWrapping>
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </Flex>

Responsive Wrapping

To create a responsive wrapping layout, pass an object as the value for the isWrapping property, using breakpoint keys to specify different wrapping for each screen size.

                                                
                                                <Flex isWrapping={{ mobile: true, tablet: false }}>
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </Flex>

Alignment

Horizontal Alignment

Flex can be horizontally aligned as stretched (default), to the left, center, or right. Additionally, you can evenly distribute the items using the space-between value. These values come from the extended alignmentX dictionary.

Vertical Alignment

Similarly to the horizontal alignment, Flex can be vertically aligned as stretched (default), to the top, center, bottom. There is also an option to align the items to the baseline. These values come from the extended alignmentY dictionary.

Example:

                                                
                                                <Flex alignmentX="right" alignmentY="baseline">
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </div>

Responsive Alignment

To create a responsive alignment, pass an object as the value for the property, using breakpoint keys to specify different alignments for each screen size.

Example:

                                                
                                                <Flex alignmentX={{ mobile: 'left', tablet: 'space-between' }} alignmentY={{ mobile: 'stretch', tablet: 'baseline' }}>
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </Flex>

Custom Spacing

You can use the spacing prop to apply custom spacing between items in both horizontal and vertical directions. The prop accepts either a spacing token (e.g. space-100) or an object with breakpoint keys and spacing token values.

Alternatively, you can set custom spacing in the horizontal (x-axis) and vertical (y-axis) direction separately using the spacingX and spacingY props.

Custom spacing:

                                                
                                                <Flex spacing="space-1200">
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </div>

Custom responsive spacing:

                                                
                                                <Flex spacing={{ mobile: 'space-400', tablet: 'space-800' }}>
                                                  <div>Item 1</div>
                                                  <div>Item 2</div>
                                                  <div>Item 3</div>
                                                </Flex>

Custom horizontal (x-axis) spacing:

                                                
                                                <Flex spacingX={{ mobile: 'space-400', tablet: 'space-800' }}>
                                                  <!-- Flex content -->
                                                </Flex>

Custom vertical (y-axis) spacing:

                                                
                                                <Flex spacingY={{ mobile: 'space-400', tablet: 'space-800' }}>
                                                  <!-- Flex content -->
                                                </Flex>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.