Flex

Use Grid to build multiple column layouts. This Grid works on twelve column system, and it contains variants of 12, 6, 4, 3, 2, and 1 column for each breakpoint.

Examples

examples

<Flex direction={{ mobile: 'column', tablet: 'row' }}>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</Flex>

Basic Usage

Row layout:

<Flex>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Column layout:

<Flex direction="column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Usage with a list:

<Flex elementType="ul" direction="column">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Flex>

ℹ️ For the row layout, the Flex component uses the display: flex CSS property. For the column layout, display: grid is used because of technical advantages: better overflow control or alignment API consistency.

Responsive Direction

To create a responsive layout, pass an object as the value for the direction property, using breakpoint keys to specify different layouts for each screen size.

<Flex direction={{ mobile: 'column', tablet: 'row' }}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Wrapping

By default, Flex items will not wrap. To enable wrapping on all breakpoints, use the isWrapping prop.

<Flex isWrapping>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Responsive Wrapping

To create a responsive wrapping layout, pass an object as the value for the isWrapping property, using breakpoint keys to specify different wrapping for each screen size.

<Flex isWrapping={{ mobile: true, tablet: false }}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Alignment

Horizontal Alignment

Flex can be horizontally aligned as stretched (default), to the left, center, or right. Additionally, you can evenly distribute the items using the space-between value. These values come from the extended alignmentX dictionary.

Vertical Alignment

Similarly to the horizontal alignment, Flex can be vertically aligned as stretched (default), to the top, center, bottom. There is also an option to align the items to the baseline. These values come from the extended alignmentY dictionary.

Example:

<Flex alignmentX="right" alignmentY="baseline">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Alignment

To create a responsive alignment, pass an object as the value for the property, using breakpoint keys to specify different alignments for each screen size.

Example:

<Flex alignmentX={{ mobile: 'left', tablet: 'space-between' }} alignmentY={{ mobile: 'stretch', tablet: 'baseline' }}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Custom Spacing

You can use the spacing prop to apply custom spacing between items in both horizontal and vertical directions. The prop accepts either a spacing token (e.g. space-100) or an object with breakpoint keys and spacing token values.

Custom spacing:

<Flex spacing="space-1200">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Custom responsive spacing:

<Flex spacing={{ mobile: 'space-400', tablet: 'space-800' }}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.