Skip to Content

Flex

A utility component to work with CSS flexbox and iTwinUI design tokens.

This page has not yet been finished and is being worked on. In the meantime, you can view the stories.

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>
);

A utility component that makes it easier to work with CSS flexbox and iTwinUI design tokens. Supports all flex properties. Can be used with or without Flex.Item and Flex.Spacer subcomponents.

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" | ... 158 more ... | FunctionComponent<...>