Forma 36 - Flex

Flex component is a Box with display: flex and abilities to apply other flexbox CSS properties via properties of the component.

The Flex component is useful because it helps with several common cases:

Create a one direction layout (vertical or horizontal) with uses Forma 36 spacing system.
Compose new component and allow to override element using the as property.

Import

import { Flex } from '@contentful/f36-components';
// or
import { Flex } from '@contentful/f36-core';

Examples

Margins & Paddings

Flex component inherits behaviour of Box component and allows to pass margins and paddings that are based on our spacing system.

To control the behaviour of the Flex component you can use specific properties that match all main Flexbox related CSS attributes.


function FlexExample() {
  return (
    <Flex justifyContent="space-between" alignItems="center">
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.green500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.red500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.blue500,
        }}
      />
    </Flex>
  );
}function FlexExample() {
  return (
    <Flex justifyContent="space-between" alignItems="center">
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.green500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.red500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.blue500,
        }}
      />
    </Flex>
  );
}

Nesting

This example shows how you can nest flexboxes to create more complicated layouts. It also uses the flexGrow prop on one of the children to expand it to fill the repaining space.


function FlexNestingExample() {
  return (
    <Flex flexDirection="column" gap="spacingS">
      <Box style={{ backgroundColor: tokens.green500, height: '50px' }} />
      <Flex flexDirection="row" gap="spacingS">
        <Box
          style={{
            width: '200px',
            backgroundColor: tokens.red500,
            height: '150px',
          }}
        />
        <Flex
          flexGrow={1}
          style={{ backgroundColor: tokens.blue500, height: '150px' }}
        />
      </Flex>
      <Box style={{ backgroundColor: tokens.orange500, height: '50px' }} />
    </Flex>
  );
}function FlexNestingExample() {
  return (
    <Flex flexDirection="column" gap="spacingS">
      <Box style={{ backgroundColor: tokens.green500, height: '50px' }} />
      <Flex flexDirection="row" gap="spacingS">
        <Box
          style={{
            width: '200px',
            backgroundColor: tokens.red500,
            height: '150px',
          }}
        />
        <Flex
          flexGrow={1}
          style={{ backgroundColor: tokens.blue500, height: '150px' }}
        />
      </Flex>
      <Box style={{ backgroundColor: tokens.orange500, height: '50px' }} />
    </Flex>
  );
}

Alignment

The alignItems prop can be used to align items along the cross axis. When direction is column, this refers to horizontal alignment, and when direction is row it refers to vertical alignment.

This example horizontally centers items in a vertical stack.


function FlexAlignmentExample() {
  return (
    <Flex flexDirection="column" gap="spacingS" alignItems="center">
      <Box
        style={{
          backgroundColor: tokens.green500,
          height: '50px',
          width: '150px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.blue500,
          height: '50px',
          width: '50px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.red500,
          height: '50px',
          width: '250px',
        }}
      />
    </Flex>
  );
}function FlexAlignmentExample() {
  return (
    <Flex flexDirection="column" gap="spacingS" alignItems="center">
      <Box
        style={{
          backgroundColor: tokens.green500,
          height: '50px',
          width: '150px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.blue500,
          height: '50px',
          width: '50px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.red500,
          height: '50px',
          width: '250px',
        }}
      />
    </Flex>
  );
}

Justification

The justifyContent prop can be used to align items along the main axis. When direction is column, this refers to vertical alignment, and when direction is row it refers to horizontal alignment.

This example vertically centers the stack of items within the available space defined by a container.


function FlexJustificationExample() {
  return (
    <Flex
      flexDirection="row"
      gap="spacingS"
      justifyContent="center"
      alignItems="center"
    >
      <Box
        style={{
          backgroundColor: tokens.green500,
          height: '20px',
          width: '150px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.blue500,
          height: '30px',
          width: '50px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.red500,
          height: '50px',
          width: '250px',
        }}
      />
    </Flex>
  );
}function FlexJustificationExample() {
  return (
    <Flex
      flexDirection="row"
      gap="spacingS"
      justifyContent="center"
      alignItems="center"
    >
      <Box
        style={{
          backgroundColor: tokens.green500,
          height: '20px',
          width: '150px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.blue500,
          height: '30px',
          width: '50px',
        }}
      />
      <Box
        style={{
          backgroundColor: tokens.red500,
          height: '50px',
          width: '250px',
        }}
      />
    </Flex>
  );
}

Using `Flex` to align other Forma components


function FlexRealWorldExample() {
  return (
    <Flex alignItems="center" justifyContent="space-between">
      <Subheading marginBottom="none">User name</Subheading>
      <Flex alignItems="center">
        <Box marginRight="spacingM">
          <TextLink href="http://google.com">User profile</TextLink>
        </Box>
        <Button>Add user to the team</Button>
      </Flex>
    </Flex>
  );
}function FlexRealWorldExample() {
  return (
    <Flex alignItems="center" justifyContent="space-between">
      <Subheading marginBottom="none">User name</Subheading>
      <Flex alignItems="center">
        <Box marginRight="spacingM">
          <TextLink href="http://google.com">User profile</TextLink>
        </Box>
        <Button>Add user to the team</Button>
      </Flex>
    </Flex>
  );
}

Props (API reference)

Open in Storybook

Name
alignContent
Description
Defines how each line is aligned within a flexbox/grid container.
"end"
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
string & {}
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"
Name
alignItems
Description
Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
"end"
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
string & {}
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"
Name
alignSelf
Description
Works like align-items, but applies only to a single flexbox item, instead of all of them.
"end"
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
string & {}
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"
Name
as
HTML Tag or React Component (e.g. div, span, etc)
Name
children
Description
Child nodes to be rendered in the component
ReactNode
Name
className
Description
CSS class to be appended to the root element
string
Name
flex
Description
A shorthand property for flex-grow, flex-shrink, flex-basis
0
"none"
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"unset"
"fit-content"
"max-content"
"min-content"
string & {}
number & {}
Name
flexBasis
Description
Defines the initial size of a flexbox item.
0
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"unset"
"fit-content"
"max-content"
"min-content"
string & {}
"-moz-max-content"
"-moz-min-content"
"-webkit-auto"
Name
flexDirection
Description
Defines how flexbox items are ordered within a flexbox container.
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
"column"
"column-reverse"
"row"
"row-reverse"
Name
flexGrow
Description
Defines how much a flexbox item should grow if there's space available.
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}
Name
flexShrink
Description
Defines how much a flexbox item should shrink if there's not enough space available.
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}
Name
flexWrap
Description
Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.
"inherit"
"initial"
"wrap"
"-moz-initial"
"revert"
"unset"
"nowrap"
"wrap-reverse"
Name
fullHeight
Description
Sets height: 100%
false
true
Name
fullWidth
Description
Sets width: 100%
false
true
Name
gap
Description
Defines a gap between flexbox items.
string
Name
isInline
Description
Sets display: inline-flex
false
true
Name
justifyContent
Description
Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.
"end"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
string & {}
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"
Name
justifyItems
Description
Defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
"end"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
string & {}
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"
Name
justifySelf
Description
Sets the way a box is justified inside its alignment container along the appropriate axis.
"end"
"auto"
"baseline"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
string & {}
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"
Name
margin
Description
sets margin to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginBottom
Description
sets margin-bottom to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginLeft
Description
sets margin-left to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginRight
Description
sets margin-right to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginTop
Description
sets margin-top to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
order
Description
Defines the order of a flexbox item
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}
Name
padding
Description
sets padding to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingBottom
Description
sets padding-bottom to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingLeft
Description
sets padding-left to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingRight
Description
sets padding-right to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingTop
Description
sets padding-top to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
testId
Description
A [data-test-id] attribute used for testing purposes
string

Import

Examples

Margins & Paddings

Nesting

Alignment

Justification

Using Flex to align other Forma components

Props (API reference)

alignContent

alignItems

alignSelf

as

children

className

flex

flexBasis

flexDirection

flexGrow

flexShrink

flexWrap

fullHeight

fullWidth

gap

isInline

justifyContent

justifyItems

justifySelf

margin

marginBottom

marginLeft

marginRight

marginTop

order

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

testId

Help improve this page

Using `Flex` to align other Forma components