Flex

Usage#

import { Flex } from '@backstage/ui';

<Flex />

API reference#

The grid component also accepts all the spacing props from the Box component.

Examples#

Simple#

A simple example of how to use the Flex component.

<Flex gap="md">
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>

Responsive#

The Flex component also supports responsive values, making it easy to create responsive designs.

<Flex gap={{ xs: 'xs', md: 'md' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>

Align#

The Flex component also supports responsive alignment, making it easy to create responsive designs.

<Flex align={{ xs: 'start', md: 'center' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

• bui-Flex

Changelog#

• 0.8.0 - Added support for data attributes in <Box />, <Container />, <Flex />, and <Grid /> components, ensuring they are correctly applied to the rendered elements. #31374
• 0.7.1 - Add missing class for flex: baseline #31013
• 0.7.1 - Add missing class for flex: baseline #31013
• 0.5.0 - Add min-width: 0; by default on Flex components to support truncated text. #30168
• 0.5.0 - Fixes spacing props on layout components #30013
• 0.4.0 - Fix spacing props on all layout components #30013
• 0.2.0 - Merge Stack + Inline into Flex #28634