Chakra UI 布局组件演示

1. Stack (堆栈布局)

最常用的布局组件,支持垂直 (VStack) 或水平 (HStack) 排列,并能自动处理子元素间距。

HStack (水平排列):

Item 1
Item 2
Item 3

VStack (垂直排列 + 分割线):

第一行内容

第二行内容

第三行内容

2. Wrap (折行布局)

类似于 Flexbox 的 wrap,当空间不足时自动换行。非常适合标签云或响应式列表。

Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 7
Tag 8
Tag 9
Tag 10
Tag 11
Tag 12
Tag 13
Tag 14
Tag 15

3. Group (组合布局)

将多个组件“粘”在一起,自动处理圆角和边框,使其在视觉上成为一个整体。

按钮组 (Attached):

输入框组合 (Grow):

4. Flex (灵活性布局)

最底层的布局组件,提供最大的控制力。适合实现复杂的两端对齐或自定义对齐逻辑。

Logo

HomeAboutContact