Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Flex

Version 8.1.0GithubStorybook

A primitive component that can be used to build flexbox based elements and layouts.

Component preview theme
<Flex>

    <Flex>

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

      >

        Left area

      </Box>

    </Flex>

    <Flex grow>

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="100%"

      >

        Right area

      </Box>

    </Flex>

  </Flex>

Guidelines

Guidelines page anchor

Flex is a layout component that allows you to build flexbox based elements and layouts. These flexible elements and layouts allow your components to adapt to the available space or screen size.

About Flex

About Flex page anchor

Flex utilizes a simplified flexbox API that allows you more efficient ways to layout, align, and distribute space among elements in a container. The Flex API helps take the confusion out of using flexbox CSS properties, by giving you simple methods to change properties like flex, flex-direction, flex-wrap, and so on.

Flexible elements can adapt to fill space within the layout. This allows Flex to work well for product layouts or elements that change orientation, resize, stretch, or shrink.

The Flex API was created because flexbox can be a difficult CSS property to wrap your head around, which leads to confusion on how it all works. If you’d like to learn more about flexbox, the learning resources below provide further information:

Accessibility

Accessibility page anchor

The Flex component is an all purpose component. By default, it has no accessibility concerns. If you use the Flex as a custom element, it is up to you to manage the resulting accessibility implications.

Examples

Examples page anchor
Component preview theme
<Flex>

    <Flex>

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

      >

        Left area

      </Box>

    </Flex>

    <Flex grow>

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="100%"

      >

        Right area

      </Box>

    </Flex>

  </Flex>

Flex Properties

Flex Properties page anchor
Component preview theme
<Flex>

    <Flex grow shrink basis="1px">

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

        width="100%"

      >

        Left area

      </Box>

    </Flex>

    <Flex grow shrink basis="1px">

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="100%"

      >

        Right area

      </Box>

    </Flex>

  </Flex>

Vertical Property

Vertical Property page anchor
Component preview theme
<Flex vertical>

    <Flex grow>

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

        width="100%"

      >

        Left area

      </Box>

    </Flex>

    <Flex grow>

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="100%"

      >

        Right area

      </Box>

    </Flex>

  </Flex>

Wrap Property

Wrap Property page anchor
Component preview theme
<Flex wrap>

    <Flex basis="800px">

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

        width="100%"

      >

        Left area

      </Box>

    </Flex>

    <Flex>

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="100%"

      >

        Right area

      </Box>

    </Flex>

  </Flex>

Vertical Alignment Properties

Vertical Alignment Properties page anchor
Component preview theme
<Flex vAlignContent="center">

    <Flex grow>

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

        width="100%"

      >

        Left area

      </Box>

    </Flex>

    <Flex grow>

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="100%"

        height="size10"

      >

        Right area

      </Box>

    </Flex>

  </Flex>

Horizontal Alignment Properties

Horizontal Alignment Properties page anchor
Component preview theme
<Flex hAlignContent="center" vertical>

    <Flex>

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

        width="100%"

      >

        Left area

      </Box>

    </Flex>

    <Flex>

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="size30"

      >

        Right area

      </Box>

    </Flex>

  </Flex>

Composition Notes

Composition Notes page anchor

The Flex component is used to compose flexible layout experiences. Let's look at an example where we need to build a flexible content layout with two sidebars: its has a left sidebar, a content area, and a right sidebar. Here's how we’ll compose the flexible layout using Flex:

Component preview theme
<Flex>

    <Flex>

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

        height="size20"

      >

        Left sidebar area

      </Box>

    </Flex>

    <Flex grow>

      <Box

        backgroundColor="colorBackgroundPrimaryWeaker"

        padding="space40"

        width="100%"

        height="size20"

      >

        Content area

      </Box>

    </Flex>

    <Flex>

      <Box

        backgroundColor="colorBackgroundPrimaryWeak"

        padding="space40"

        height="size20"

      >

        Right sidebar area

      </Box>

    </Flex>

  </Flex>

When to use Flex

When to use Flex page anchor

The Flex component should be used when a flexible layout is needed with a page layout or custom component layout.

Do

Use Flex to layout your page or custom component.

Don't

Use Flex to set margins or padding within layouts and components.

Do

Use Flex to build responsive experiences.

Don't

Use inline CSS or classNames to add styles that Flex can provide.