Stack

就绪

Storybook

从 v10.2.3 起可用

概述

Stack 组件是 flexbox 布局模型的一个简单包装器，可以轻松创建响应式和灵活的布局。它提供了一种简单直观的方式来水平或垂直对齐和分布容器中的项目。

何时使用

• 用于创建能够适应不同屏幕尺寸和方向的响应式和灵活布局。
• 当需要一种简单直观的方式来水平或垂直对齐和分布容器中的项目时。
• 无需更改 HTML 结构即可轻松重新排序和重新排列元素。
• 当目标是创建等高列时。
• 创建类似网格的结构，并根据可用空间自动换行和调整项目大小。

何时不使用

• 对于具有复杂需求的复杂多维布局，这些布局更适合 CSS 框架或网格系统。
• 当需要对元素的间距和位置进行精确控制时。

属性

显示

有 5 个与内容显示方式相关的不同属性

• direction，可能的值：row, row-reverse, column, column-reverse
• wrap，可能的值：nowrap, wrap, wrap-reverse
• alignItems，可能的值：stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
• justifyContent，可能的值：flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
• gap，可能的值：ThemeSpacingTokens (0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10)

如果您只需要创建 Flex 布局而不对 box 应用其他样式，请改用 Stack 组件。

加载中...

实时编辑器

<Stack direction='row' wrap='wrap' alignItems='center' justifyContent='center' gap={5}>
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</Stack>

响应性

以上所有属性都可以以响应式方式定义，这意味着根据窗口大小会设置不同的值。

要以响应式方式定义其中任何一个，只需传入一个以响应式断点作为键的对象即可。例如，不要这样定义 direction：direction='row'，而应这样定义：direction={{ xs: 'column', md: 'row' }}。这意味着从 xs 断点开始，direction 设置为 column，而从 md 断点开始，则设置为 row。

主题中可能的断点可以在此处找到。

延伸阅读和资源

• Storybook 文档和属性表

演练场