Skip to Content
DocumentationComponentsFlex

Flex

Flex is a utility component that helps create layouts using the CSS Flexbox model. It provides a more efficient way to lay out, align, and distribute space among items in a container.

Loading...

Overview

Resources

Changelog

Loading...

Source code

Loading...

Storybook

Loading...

Install

yarn add @camp/flex

Upgrading to Next Gen

The Flex component has been moved from @activecampaign/camp-components-flex to @camp/flex. This is a 1-to-1 migration with no API changes.

// Previous implementation
import Flex from '@activecampaign/camp-components-flex';
 
<Flex direction="row" alignItems="center" gap="8px">
  <Flex.Item>Item 1</Flex.Item>
  <Flex.Item>Item 2</Flex.Item>
</Flex>;
 
// New implementation
import Flex from '@camp/flex';
 
<Flex direction="row" alignItems="center" gap="8px">
  <Flex.Item>Item 1</Flex.Item>
  <Flex.Item>Item 2</Flex.Item>
</Flex>;

Migration steps

  1. Update the import path from @activecampaign/camp-components-flex to @camp/flex
  2. No prop or API changes are required

Variations

Row (Default)

Use Flex to lay out items horizontally in a row. This is the default direction.

import Flex from '@camp/flex';
 
<Flex gap="8px">
  <Flex.Item>Item 1</Flex.Item>
  <Flex.Item>Item 2</Flex.Item>
  <Flex.Item>Item 3</Flex.Item>
</Flex>;

Column

Set direction to "column" to stack items vertically from top to bottom.

import Flex from '@camp/flex';
 
<Flex direction="column" gap="8px">
  <Flex.Item>Item 1</Flex.Item>
  <Flex.Item>Item 2</Flex.Item>
  <Flex.Item>Item 3</Flex.Item>
</Flex>;

Justify Content Space Between

Use justifyContent="space-between" to push items to the edges of the container with equal space distributed between them.

import Flex from '@camp/flex';
 
<Flex justifyContent="space-between">
  <Flex.Item>Left</Flex.Item>
  <Flex.Item>Right</Flex.Item>
</Flex>;

Align Items Center

Use alignItems="center" to vertically center items within the container, which is useful when items have different heights.

import Flex from '@camp/flex';
 
<Flex alignItems="center" gap="8px">
  <Flex.Item>Item A</Flex.Item>
  <Flex.Item>Tall Item</Flex.Item>
  <Flex.Item>Item C</Flex.Item>
</Flex>;

Item Grow

Use the grow prop on Flex.Item to control how items expand to fill available space. Higher values take proportionally more space.

import Flex from '@camp/flex';
 
<Flex gap="8px">
  <Flex.Item grow={1}>Grow 1</Flex.Item>
  <Flex.Item grow={2}>Grow 2</Flex.Item>
  <Flex.Item>No grow</Flex.Item>
</Flex>;

Wrap

Set wrap="wrap" to allow items to flow onto multiple lines when they exceed the container width.

import Flex from '@camp/flex';
 
<Flex wrap="wrap" gap="8px">
  <Flex.Item>Item 1</Flex.Item>
  <Flex.Item>Item 2</Flex.Item>
  <Flex.Item>Item 3</Flex.Item>
  <Flex.Item>Item 4</Flex.Item>
  <Flex.Item>Item 5</Flex.Item>
</Flex>;

Usage

The Flex component renders a div element with display: flex by default but can be configured to return any element using the as prop. Use Flex.Item to control the layout properties of individual flex items.

Best practices

  • Use Flex for one-dimensional layouts (row or column); for two-dimensional grid layouts, consider CSS Grid
  • Use the gap prop instead of margins on children for consistent spacing between items
  • Use Flex.Item with grow, shrink, and basis props to control how items fill available space
  • Set direction="column" for vertical stacking layouts
  • Use alignItems and justifyContent for alignment instead of manual padding or margins
  • Set inline to true when you need the flex container to behave as an inline element

Content guidelines

✅ DO

  • Use Flex for arranging components in rows or columns
  • Combine justifyContent and alignItems for precise alignment
  • Use gap for consistent spacing between items
  • Use Flex.Item with grow to create fluid layouts

🚫 DON’T

  • Don’t nest deeply without purpose — keep layouts simple
  • Don’t use Flex when a single block element would suffice
  • Don’t rely on fixed widths when grow and shrink can handle responsive sizing
  • Don’t mix manual margins with the gap prop

Accessibility

  • Flex is a layout utility and does not affect the semantic meaning or accessibility of content
  • Ensure the visual order of flex items matches the DOM order for logical tab navigation and screen reader flow
  • When using direction="row-reverse" or direction="column-reverse", verify that the visual reordering does not create confusion for keyboard and assistive technology users
  • Use the as prop to render semantically appropriate elements (e.g., nav, section, ul) when the layout context warrants it
Last updated on