Flex

Flex is a utility component that helps to create a layout.

Live Demo

Resources

Install


yarn add @activecampaign/camp-components-flex

Implementation details

The Flex component will contain content using the flexible box module. By default, Flex will render a div HTML element with flex display but can be configured to return any element by using the as component prop.

Flex (default)

Use Flex to control Flexbox container properties. This component will render with a default display of Flex. Use Flex.Item to control the layout properties of individual flex items.

Item 1

Item 2

Item 3


import Flex from '@activecampaign/camp-components-flex';
import Text from '@activecampaign/camp-components-text';
 
<Flex
  alignContent="normal"
  alignItems="center"
  direction="row"
  justifyContent="center"
  styles={{
    height: '100%',
  }}
  wrap="nowrap"
>
  <Flex.Item
    p="sp300"
    styles={{
      backgroundColor: 'ocean100',
      border: 'b100 bSolid slate200',
      borderRadius: 'radii100',
    }}
  >
    <Text.Body>Item 1</Text.Body>
  </Flex.Item>
  <Flex.Item
    p="sp300"
    styles={{
      backgroundColor: 'ocean100',
      border: 'b100 bSolid slate200',
      borderRadius: 'radii100',
    }}
  >
    <Text.Body>Item 2</Text.Body>
  </Flex.Item>
  <Flex.Item
    p="sp300"
    styles={{
      backgroundColor: 'ocean100',
      border: 'b100 bSolid slate200',
      borderRadius: 'radii100',
    }}
  >
    <Text.Body>Item 3</Text.Body>
  </Flex.Item>
</Flex>;

Two columns

Create a two column layout with Flex by including two <Flex.Item> components as children of <Flex>. Items render in order from left to right by default.

This is a column. Here is some text in the column. The width in these columns is determined by the styles applied to the content in each item.


<Flex>
  <Flex.Item p="sp300">
    <Text.Body>
      This is a column. Here is some text in the column. The width in these columns is determined by
      the styles applied to the content in each item.
    </Text.Body>
  </Flex.Item>
  <Flex.Item p="sp300">
    <Text.Body>
      This is a column. Here is some text in the column. The width in these columns is determined by
      the styles applied to the content in each item.
    </Text.Body>
  </Flex.Item>
</Flex>

Three columns

Similar to the two column layout, create a three column layout by including three <Flex.Item> components as children of <Flex>. Items render in order from left to right by default.

This is a column. Here is some text in the column. The width in these columns is determined by the styles applied to the content in each item.


<Flex>
  <Flex.Item p="sp300">
    <Text.Body>
      This is a column. Here is some text in the column. The width in these columns is determined by
      the styles applied to the content in each item.
    </Text.Body>
  </Flex.Item>
  <Flex.Item p="sp300">
    <Text.Body>
      This is a column. Here is some text in the column. The width in these columns is determined by
      the styles applied to the content in each item.
    </Text.Body>
  </Flex.Item>
  <Flex.Item p="sp300">
    <Text.Body>
      This is a column. Here is some text in the column. The width in these columns is determined by
      the styles applied to the content in each item.
    </Text.Body>
  </Flex.Item>
</Flex>

Two or more rows

To create a layout in rows, set the direction prop to "column". This will render all items in order from top to bottom by default. To create additional rows, simply add more <Flex.Item> components.

Hello, world!

These two rows are displayed in a single column and they are automatically aligned with the left side of the flex area. To add more rows, simply add more Flex Items.


<Flex direction="column">
  <Flex.Item p="sp300">
    <Text.Heading>Hello, world!</Text.Heading>
  </Flex.Item>
  <Flex.Item p="sp300">
    <Text.Body>
      These two rows are displayed in a single column and they are automatically aligned with the
      left side of the flex area. To add more rows, simply add more Flex Items.
    </Text.Body>
  </Flex.Item>
</Flex>

Space between

This is a common layout pattern where items are pushed to the left and right sides of the layout area. To achieve this, set the justifyContent prop to "space-between". This example also uses the prop alignItems to "center" the content vertically.

Hello world!


<Flex alignItems="center" justifyContent="space-between">
  <Flex.Item>
    <Text.Body>Hello world!</Text.Body>
  </Flex.Item>
  <Flex.Item>
    <Button>Submit</Button>
  </Flex.Item>
</Flex>

Vertically aligned

This common layout pattern displays content in order from top to bottom (direction="column") and aligns the items in the center of the layout area (alignItems="center").

Hello, world!

These items are displayed in a single column and they are aligned in the center of the flex area.


<Flex alignItems="center" direction="column">
  <Flex.Item p="sp300">
    <Text.Heading>Hello, world!</Text.Heading>
  </Flex.Item>
  <Flex.Item p="sp300">
    <Text.Body>
      These items are displayed in a single column and they are aligned in the center of the flex
      area.
    </Text.Body>
  </Flex.Item>
  <Flex.Item p="sp300">
    <Styled p="sp300">
      <Button>Submit</Button>
    </Styled>
  </Flex.Item>
</Flex>