Flex | iTwinUI

A utility component that makes it easier to work with CSS flexbox and iTwinUI design tokens.

Usage

The Flex component is a generic container that can be wrapped around the items that need to be laid out using CSS flexbox. These items can be used directly or with Flex.Item for more granular customization.

Flex offers a gap prop, which can accept a value corresponding to iTwinUI size tokens (e.g. "x", "xs"). By default, a gap of "xs" is used.

import * as React from 'react';
import { Flex } from '@itwin/itwinui-react';

export default () => {
  return (
    <Flex>
      <MyItem>1</MyItem>
      <MyItem>2</MyItem>
      <MyItem>3</MyItem>
    </Flex>
  );
};

const MyItem = ({ children = '' }) => (
  <div className='demo-item-container'>{children}</div>
);

The Flex component offers props that are equivalent to those of the CSS flexbox, such as alignItems (defaults to "center"), justifyContent, flexDirection, and flexWrap.

Spacer

The Flex.Spacer subcomponent fills up the available space between flex items. This subcomponent is useful when it is necessary to push certain items to the edges.

import * as React from 'react';
import { Flex } from '@itwin/itwinui-react';

export default () => {
  return (
    <Flex className='demo-container'>
      <MyItem>1</MyItem>
      <MyItem>2</MyItem>

      <Flex.Spacer />

      <MyItem>3</MyItem>
      <MyItem>4</MyItem>
      <MyItem>5</MyItem>
    </Flex>
  );
};

const MyItem = ({ children = '' }) => (
  <div className='demo-item-container'>{children}</div>
);

Flex Items

The Flex.Item subcomponent allows customizing individual flex items using the flex, alignSelf and gapBefore/gapAfter props.

import * as React from 'react';
import { Flex } from '@itwin/itwinui-react';

export default () => {
  return (
    <Flex className='demo-container'>
      <Flex.Item flex='1'>
        <MyItem>1</MyItem>
      </Flex.Item>

      <Flex.Item flex='3'>
        <MyItem>2</MyItem>
      </Flex.Item>

      <Flex.Item flex='1'>
        <MyItem>3</MyItem>
      </Flex.Item>
    </Flex>
  );
};

const MyItem = ({ children = '' }) => (
  <div className='demo-item-container'>{children}</div>
);

The gapBefore/gapAfter props can used to override the gap at an individual level, for when you need a different gap than the one set in the parent Flex.

import * as React from 'react';
import { Flex } from '@itwin/itwinui-react';

export default () => {
  return (
    /* '2xl' gap between all items that don't specify `gapBefore` or `gapAfter` */
    <Flex gap='2xl'>
      <Flex.Item>
        <MyItem>1</MyItem>
      </Flex.Item>

      <Flex.Item>
        <MyItem>2</MyItem>
      </Flex.Item>

      {/* ⬇️ will always have 's' gap between 3 and 4  */}
      <Flex.Item gapAfter='s'>
        <MyItem>3</MyItem>
      </Flex.Item>

      <Flex.Item>
        <MyItem>4</MyItem>
      </Flex.Item>

      {/* ⬇️ will always have '3xs' gap between 4 and 5 */}
      <Flex.Item gapBefore='3xs'>
        <MyItem>5</MyItem>
      </Flex.Item>

      <Flex.Item>
        <MyItem>6</MyItem>
      </Flex.Item>
    </Flex>
  );
};

const MyItem = ({ children = '' }) => (
  <div className='demo-item-container'>{children}</div>
);

Props

Prop	Description	Default
display	Value of the `display` property. "flex" \| "inline-flex"	'flex'
justifyContent	Value of the `justify-content` property. JustifyContent	'flex-start'
alignItems	Value of the `align-items` property. Defaults to 'center' but you might want to use 'flex-start' in some cases. AlignItems	'center'
gap	Value of the `gap` property. Supports aliases for iTwinUI size tokens: 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl Also accepts any valid css value (e.g. "1rem" or "2px") "s" \| "3xs" \| "2xs" \| "xs" \| "m" \| "l" \| "xl" \| "2xl" \| "3xl" \| AnyString	'xs'
flexDirection	Value of the `direction` property. FlexDirection	'row'
flexWrap	Value of the `flex-wrap` property. FlexWrap	'nowrap'
as	"symbol" \| "object" \| "div" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| ... 159 more ... \| FunctionComponent<...>