import { Meta, ArgTypes } from '@storybook/blocks';
import { Stack } from './Stack';

<Meta title="MDX|Stack" component={Stack} />

# Stack

The Stack component is a simple wrapper around the flexbox layout model that allows to easily create responsive and flexible layouts. It provides a simple and intuitive way to align and distribute items within a container either horizontally or vertically.

### Usage

#### When to use

- For creating responsive and flexible layouts that can adapt to different screen sizes and orientations.
- When needing a simple and intuitive way to align and distribute items within a container either horizontally or vertically.
- To easily reorder and rearrange elements without changing the HTML structure.
- When aiming to create equal height columns.
- To create a grid-like structure with automatic wrapping and sizing of items based on the available space.

#### When not to use

- For complex multi-dimensional layouts with intricate requirements that are better suited for CSS frameworks or grid systems.
- When precise control over spacing and positioning of elements is necessary.

### Props

<ArgTypes of={Stack} />
