Stack
The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.
Usage
Stack is concerned with one-dimensional layouts, while Grid handles two-dimensional layouts. The default direction is column which stacks children vertically.
To control space between children, use the spacing prop.
The spacing value can be any number, including decimals and any string.
The prop is converted into a CSS property using the theme.spacing() helper.
Direction
By default, Stack arranges items vertically in a column.
However, the direction prop can be used to position items horizontally in a row as well.
Dividers
Use the divider prop to insert an element between each child. This works particularly well with the Divider component.
Interactive
Below is an interactive demo that lets you explore the visual results of the different settings:
<Stack
direction="row"
justifyContent="center"
alignItems="center"
spacing={2}
>System props
As a CSS utility component, the Stack supports all system properties. You can use them as props directly on the component.
For instance, a margin-top:
<Stack mt={2}>
Flexbox gap
To use flexbox gap for the spacing implementation, set useFlexGap prop to true.
It removes the known 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 before using it.
To set the prop to all stack instances, create a theme with default props:
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 */}
</ThemeProvider>
);
}
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.
<Stack>
<Button sx={{ marginTop: '30px' }}>...</Button>
</Stack>
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:
<Stack direction="row">
<Typography noWrap>
In order for the item to stay within the container you need to set min-width: 0.
<Stack direction="row" sx={{ minWidth: 0 }}>
<Typography noWrap>
Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.
Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.