Flex

import {Container, Flex} from '@sentry/scraps/layout';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/layout/flex');

import {SIZES} from './stories/consts';

The Flex component is a layout component that extends the Container component with CSS flexbox properties. It combines the powerful spacing, sizing, and styling capabilities of Container with flexible positioning and alignment controls.

Basic Usage

To create a basic flex container, wrap elements in <Flex> and they will be laid out horizontally using flexbox.

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

Composition

The Flex implements composition via <a href="/stories/layout/composition">render prop</a> pattern.

<Storybook.Demo> <Flex border="primary" radius="md" padding="md" justify="between" background="primary" width="80%"

{props => (

  <p {...props}>
    <span>Justify</span>
    <span>Between</span>
    <span>On</span>
    <span>Paragraph</span>
  </p>
)}

Specifying the DOM Node via as prop

The Flex component renders a div element by default, but you can specify the DOM node to render by passing a as prop.

<Flex as="section" padding="md" background="primary">
  Basic flex content
</Flex>

Flex Properties

Flex extends the Container component by adding Flex specific properties like direction, gap, justify, align, wrap, flex, that influence the layout of its children.

Simialarly to Container, Flex inherits all spacing props like m, p, mt, mb, ml, mr, pt, pb, pl, pr and implements responsive props so that the layout can be changed per breakpoint.

Row Direction

<Storybook.Demo> <Flex direction="row" gap="md" justify="between" align="center" padding="md"> <Container padding="md" border="primary" radius="md" background="primary"> Item 1 </Container> <Container padding="md" border="primary" radius="md" background="primary"> Item 2 </Container> <Container padding="md" border="primary" radius="md" background="primary"> Item 3 </Container> </Flex> </Storybook.Demo>

<Flex direction="row" gap="md" justify="between" align="center" padding="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Column direction

<Storybook.Demo> <Flex direction="column" gap="md" justify="between" align="center"> <Container padding="md" border="primary" radius="md" background="primary"> Item 1 </Container> <Container padding="md" border="primary" radius="md" background="primary"> Item 2 </Container> <Container padding="md" border="primary" radius="md" background="primary"> Item 3 </Container> </Flex> </Storybook.Demo>

<Flex direction="column" gap="md" justify="between" align="center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Spacing

Similarly to Container, the Flex properties like gap follow the same spacing system.

<Storybook.Demo> <Flex direction="column" gap="md"> {SIZES.map(size => ( <Flex direction="column" gap="sm" key={size}> <strong>{size} gap</strong> <Flex margin="md" gap={size}> <Container padding="md" border="primary" radius="md" background="primary"> Item 1 </Container> <Container padding="md" border="primary" radius="md" background="primary"> Item 2 </Container> <Container padding="md" border="primary" radius="md" background="primary"> Item 3 </Container> </Flex> </Flex> ))} </Flex> </Storybook.Demo>

<Flex m="md" gap="xs">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Responsive Props

All props support responsive values using breakpoint objects. Breakpoints are: xs, sm, md, lg, xl, 2xl.

Example of a responsive flex container that uses a static gap, but changes direction based on the breakpoint.

<Storybook.Demo> <Flex direction={{xs: 'row-reverse', sm: 'column', md: 'row'}} gap="md" padding="md"> <Container padding="md" border="primary" radius="md" background="primary"> Responsive </Container> <Container padding="md" border="primary" radius="md" background="primary"> Layout </Container> <Container padding="md" border="primary" radius="md" background="primary"> Items </Container> <Container padding="md" border="primary" radius="md" background="primary"> 🔥 </Container> </Flex> </Storybook.Demo>

<Flex
  // Direction = column on sm and row on md
  direction={{xs: 'column-reverse', sm: 'column', md: 'row'}}
  // Gap = md on all sizes
  gap="md"
>
  <div>Responsive</div>
  <div>Layout</div>
  <div>Items</div>
  <div>🔥</div>
</Flex>

If a prop is not specified for a breakpoint, the value will not be inherited from the previous breakpoint.