Flex

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.

Hide code
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>
  );
}
Open in Playground

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.

Hide code
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>
  );
}
Open in Playground

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.

Hide code
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>
  );
}
Open in Playground

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.

Hide code
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>
  );
}
Open in Playground

Using Flex to align other Forma components

Hide code
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>
  );
}
Open in Playground

Props (API reference)