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