monday-ui-react-core/src/components/Flex/__stories__/Flex.mdx

Official monday.com UI resources for application development in React.js

import { Canvas, Meta } from "@storybook/blocks";
import { LIST, MENU, TABS } from "../../../storybook/components/related-components/component-description-map";
import * as FlexStories from "./Flex.stories";

<Meta of={FlexStories} />

# Flex

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Use Flex component to position group of sub-elements in one dimension, horizontal or vertical, without being dependent on a custom CSS file for positioning the sub-elements.

<Canvas of={FlexStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Use flex component whenever you want to define a layout with one dimension.",
    "Flex layout can be either horizontal or vertical.",
    "You can defined the spacing between the layout children by using our fixed sizes - xs (4px), small (8px), medium (16px) or large( 24px)."
  ]}
/>

## Variants

### Directions

<Canvas of={FlexStories.Directions} />

### Horizontal spacing between items

<Canvas of={FlexStories.HorizontalSpacingBetweenItems} />

### Vertical spacing between items

<Canvas of={FlexStories.VerticalSpacingBetweenItems} />

### Horizontal positions

<Canvas of={FlexStories.HorizontalPositions} />

### Vertical positions

<Canvas of={FlexStories.VerticalPositions} />

### Support multi lines layout

You can display a layout that includes multiple lines using the flex component wrap mode.
This mode allows the layout to break into multiple lines if all the component children cannot fit into one only.

<Canvas of={FlexStories.SupportMultiLinesLayout} />

## Use cases and examples

### Flex as toolbar container

You can use flex component for create responsive toolbars

<Canvas of={FlexStories.FlexAsToolbarContainer} />

## Related components

<RelatedComponents componentsNames={[MENU, TABS, LIST]} />