2021-03-19 04:19:52 -07:00
---
2023-06-28 19:34:35 +02:00
productId: material-ui
2021-03-19 04:19:52 -07:00
title: React Stack component
2024-06-27 12:03:45 +07:00
components: Stack, PigmentStack
2021-03-19 04:19:52 -07:00
githubLabel: 'component: Stack'
2024-08-20 19:26:00 +05:30
githubSource: packages/mui-material/src/Stack
2021-03-19 04:19:52 -07:00
---
# Stack
2023-04-14 13:10:08 +02:00
<p class="description">Stack is a container component for arranging elements vertically or horizontally.</p>
## Introduction
The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional spacing and dividers between each child.
:::info
2023-06-21 23:05:36 +02:00
Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _ and _ horizontal arrangement.
2023-04-14 13:10:08 +02:00
:::
2021-03-19 04:19:52 -07:00
2024-05-02 12:16:19 +02:00
{{"component": "@mui/docs/ComponentLinkHeader "}}
2021-03-19 04:19:52 -07:00
2023-04-14 13:10:08 +02:00
## Basics
2021-03-19 04:19:52 -07:00
2023-04-14 13:10:08 +02:00
``` jsx
2023-05-02 23:03:23 +02:00
import Stack from '@mui/material/Stack' ;
2023-04-14 13:10:08 +02:00
```
The Stack component acts as a generic container, wrapping around the elements to be arranged.
Use the `spacing` prop to control the space between children.
The spacing value can be any number, including decimals, or a string.
(The prop is converted into a CSS property using the [`theme.spacing()` ](/material-ui/customization/spacing/ ) helper.)
2021-03-19 04:19:52 -07:00
2022-02-04 11:13:15 +07:00
{{"demo": "BasicStack.js", "bg": true}}
2021-03-19 04:19:52 -07:00
2023-04-14 13:10:08 +02:00
### Stack vs. Grid
2025-02-24 15:01:28 -03:00
`Stack` is concerned with one-dimensional layouts, while [Grid ](/material-ui/react-grid/ ) handles two-dimensional layouts. The default direction is `column` which stacks children vertically.
2021-03-26 07:55:12 -04:00
2021-03-19 04:19:52 -07:00
## Direction
2023-04-14 13:10:08 +02:00
By default, Stack arranges items vertically in a column.
Use the `direction` prop to position items horizontally in a row:
2021-03-19 04:19:52 -07:00
2022-02-04 11:13:15 +07:00
{{"demo": "DirectionStack.js", "bg": true}}
2021-03-19 04:19:52 -07:00
## Dividers
2023-04-14 13:10:08 +02:00
Use the `divider` prop to insert an element between each child.
This works particularly well with the [Divider ](/material-ui/react-divider/ ) component, as shown below:
2021-03-19 04:19:52 -07:00
2022-02-04 11:13:15 +07:00
{{"demo": "DividerStack.js", "bg": true}}
2021-03-19 04:19:52 -07:00
## Responsive values
2021-06-10 13:43:47 +05:30
You can switch the `direction` or `spacing` values based on the active breakpoint.
2021-03-19 04:19:52 -07:00
2022-02-04 11:13:15 +07:00
{{"demo": "ResponsiveStack.js", "bg": true}}
2021-03-19 04:19:52 -07:00
2023-03-27 10:13:58 +07:00
## Flexbox gap
2025-11-07 12:42:51 +01:00
To use [flexbox `gap` ](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/gap ) for the spacing implementation, set the `useFlexGap` prop to true.
2023-03-27 10:13:58 +07:00
It removes the [known limitations ](#limitations ) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers.
We recommend checking the [support percentage ](https://caniuse.com/?search=flex%20gap ) before using it.
{{"demo": "FlexboxGapStack.js", "bg": true}}
To set the prop to all stack instances, create a theme with default props:
``` js
import { ThemeProvider , createTheme } from '@mui/material/styles' ;
import Stack from '@mui/material/Stack' ;
const theme = createTheme ( {
components : {
MuiStack : {
defaultProps : {
useFlexGap : true ,
} ,
} ,
} ,
} ) ;
function App ( ) {
return (
< ThemeProvider theme = { theme } >
< Stack > … < /Stack> {/ * uses flexbox gap by default * / }
< / T h e m e P r o v i d e r >
) ;
}
```
2023-04-14 13:10:08 +02:00
## Interactive demo
Below is an interactive demo that lets you explore the visual results of the different settings:
{{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}}
2026-03-25 09:44:03 +07:00
## Customization
2023-04-14 13:10:08 +02:00
2026-03-25 09:44:03 +07:00
Use the [`sx` prop ](/system/getting-started/the-sx-prop/ ) to quickly customize any Stack instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI
Below is an example of how to apply center align items using this prop:
2023-04-14 13:10:08 +02:00
2026-03-25 09:44:03 +07:00
``` jsx
< Stack sx = { { alignItems : 'center' } } / >
2023-04-14 13:10:08 +02:00
```
2023-03-27 10:13:58 +07:00
## Limitations
### Margin on the children
Customizing the margin on the children is not supported by default.
For instance, the top-margin on the `Button` component below will be ignored.
``` jsx
< Stack >
< Button sx = { { marginTop : '30px' } } > ... < / Button >
< / Stack >
```
:::success
To overcome this limitation, set [`useFlexGap` ](#flexbox-gap ) prop to true to switch to CSS flexbox gap implementation.
You can learn more about this limitation by visiting this [RFC ](https://github.com/mui/material-ui/issues/33754 ).
:::
### white-space: nowrap
The initial setting on flex items is `min-width: auto` .
This causes a positioning conflict when children use `white-space: nowrap;` .
You can reproduce the issue with:
``` jsx
< Stack direction = "row" >
< Typography noWrap >
```
In order for the item to stay within the container you need to set `min-width: 0` .
``` jsx
< Stack direction = "row" sx = { { minWidth : 0 } } >
< Typography noWrap >
```
{{"demo": "ZeroWidthStack.js", "bg": true}}
2023-04-14 13:10:08 +02:00
## Anatomy
The Stack component is composed of a single root `<div>` element:
``` html
< div class = "MuiStack-root" >
<!-- Stack contents -->
< / div >
```
