## Stack  
Use Stack component to compose elements and components in a vertical flex container  
Category: Layout  

### Usage

`Stack` is a vertical flex container. If you need a horizontal flex container, use `Group` component instead. If you
need to have full control over flex container properties, use `Flex` component.

Adjust stack styles with `align`, `justify`, and `gap` props.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Button("1", variant="outline"),
        dmc.Button("2", variant="outline"),
        dmc.Button("3", variant="outline"),
    ],
    align="center",
    gap="xl",
)
```
### Interactive Demo

### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Stack Selectors

| Selector | Static selector        | Description    |
|----------|-------------------------|----------------|
| root     | .mantine-Stack-root     | Root element   |



#### Stack CSS Variables

| Selector | Variable         | Description                     |
|----------|------------------|---------------------------------|
| root     | --stack-align    | Controls `align-items` property |
|          | --stack-justify  | Controls `justify-content` property |
|          | --stack-gap      | Controls `gap` property         |



### Keyword Arguments
#### Stack

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- align (optional):
    Controls `align-items` CSS property, `'stretch'` by default.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- gap (string | number; optional):
    Key of `theme.spacing` or any valid CSS value to set `gap`
    property, numbers are converted to rem, `'md'` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- justify (optional):
    Controls `justify-content` CSS property, `'flex-start'` by
    default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.