Version 0.11.2

Flex

A flex container with gap, alignment, and direction props.

Usage#

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

<Flex gap="4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

API reference#

PropTypeDefaultDescription
direction
rowcolumnrow-reversecolumn-reverse
-Main axis direction. Use row for horizontal, column for vertical layouts.
align
startcenterendbaselinestretch
-Cross-axis alignment. Controls how children align perpendicular to the main axis.
justify
startcenterendbetween
-Main-axis distribution. Use between to space children evenly with no edge gaps.
gap
00.5auto
4Space between children. Accepts spacing scale values or responsive objects.
surface
0123dangerwarningsuccessauto
-Surface level for theming. Use auto to increment from parent context.
children
ReactNode
-Content to render inside the flex container.
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.
00.5auto
-Padding and margin properties for controlling spacing around the element.

Examples#

Direction#

<Flex direction="column" gap="2">
  <DecorativeBox>First</DecorativeBox>
  <DecorativeBox>Second</DecorativeBox>
  <DecorativeBox>Third</DecorativeBox>
</Flex>
First
Second
Third

Responsive gap#

Gap values can be responsive using breakpoint objects.

<Flex gap={{ initial: '2', md: '4' }}>
  <DecorativeBox>1</DecorativeBox>
  <DecorativeBox>2</DecorativeBox>
  <DecorativeBox>3</DecorativeBox>
</Flex>
1
2
3

Alignment#

<Flex align="center" justify="between" gap="4">
  <DecorativeBox>Start</DecorativeBox>
  <DecorativeBox>Middle</DecorativeBox>
  <DecorativeBox>End</DecorativeBox>
</Flex>
Start
Middle
End

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
  • bui-Flex[data-bg="neutral-1"]
  • bui-Flex[data-bg="neutral-2"]
  • bui-Flex[data-bg="neutral-3"]
  • bui-Flex[data-bg="danger"]
  • bui-Flex[data-bg="warning"]
  • bui-Flex[data-bg="success"]

Changelog#