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.
1
2
3
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<...> |