Stack

Stack 是一个容器组件，用于垂直或水平排列元素。

简介

Stack 组件管理其直接子元素沿垂直或水平轴的布局，每个子元素之间可以有可选的间距和分隔线。

基础知识

import Stack from '@mui/system/Stack';

Stack 组件充当通用容器，包裹要排列的元素。

使用 spacing 属性控制子元素之间的间距。间距值可以是任何数字（包括小数）或字符串。（该属性使用 theme.spacing() 辅助函数转换为 CSS 属性。）

项目 1

项目 2

项目 3

<Stack spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

按 Enter 开始编辑

Stack 与 Grid 的比较

Stack 关注一维布局，而 Grid 处理二维布局。默认方向是 column，它会垂直堆叠子元素。

方向

默认情况下，Stack 在列中垂直排列项目。使用 direction 属性在行中水平定位项目

项目 1

项目 2

项目 3

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

按 Enter 开始编辑

分隔线

使用 divider 属性在每个子元素之间插入一个元素，如下所示

项目 1

项目 2

项目 3

响应式值

您可以根据活动的断点切换 direction 或 spacing 值。

项目 1

项目 2

项目 3

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 4 }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 4 }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

按 Enter 开始编辑

Flexbox 间隙

要使用 flexbox gap 进行间距实现，请将 useFlexGap 属性设置为 true。

它消除了使用 CSS 嵌套选择器的默认实现的已知限制。但是，CSS flexbox 间隙在某些浏览器中尚未完全支持。

我们建议在使用前查看支持百分比。

项目 1

项目 2

长内容

<Stack
  spacing={{ xs: 1, sm: 2 }}
  direction="row"
  useFlexGap
  sx={{ flexWrap: 'wrap' }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Long content</Item>
</Stack>

<Stack
  spacing={{ xs: 1, sm: 2 }}
  direction="row"
  useFlexGap
  sx={{ flexWrap: 'wrap' }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Long content</Item>
</Stack>

按 Enter 开始编辑

交互式演示

以下是一个交互式演示，让您可以探索不同设置的视觉效果

项目 1

项目 2

项目 3

<Stack
  direction="row"
  spacing={2}
  sx={{
    justifyContent: "center",
    alignItems: "center",
  }}
>

系统属性

局限性

子元素的 margin

默认情况下不支持自定义子元素的 margin。

例如，下面 button 组件的 top-margin 将被忽略。

<Stack>
  <button style={{ marginTop: '30px' }}>...</button>
</Stack>

white-space: nowrap

flex 项目的初始设置是 min-width: auto。当子元素使用 white-space: nowrap; 时，这会导致定位冲突。您可以使用以下代码重现此问题

<Stack direction="row">
  <span style={{ whiteSpace: 'nowrap' }}>

为了使项目保持在容器内，您需要设置 min-width: 0。

<Stack direction="row" sx={{ minWidth: 0 }}>
  <span style={{ whiteSpace: 'nowrap' }}>

解剖结构

Stack 组件由单个根 <div> 元素组成

<div class="MuiStack-root">
  <!-- Stack contents -->
</div>

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

<Stack />