Space 间距

控制内部元素排列保持相同的间距。

使用 CSS Style: gap, column-gap, row-gap 自定义间距。

示例

水平方向的间距

<Space>
  <Button>按钮1</Button>
  <Button>按钮2</Button>
  <Button>按钮3</Button>
</Space>

换行+自定义间距

<Space class="gap-4" block wrap>
  <Button>按钮1</Button>
  <Button>按钮2</Button>
  <Button>按钮3</Button>
  <Button>按钮4</Button>
  <Button>按钮5</Button>
  <Button>按钮6</Button>
  <Button>按钮7</Button>
  <Button>按钮8</Button>
  <Button>按钮9</Button>
  <Button>按钮10</Button>
  <Button>按钮11</Button>
</Space>

垂直方向的间距

<Space direction="vertical">
  <Button>按钮1</Button>
  <Button>按钮2</Button>
  <Button>按钮3</Button>
</Space>

渲染为块级元素

<Space direction="vertical" block>
  <Button>按钮1</Button>
  <Button>按钮2</Button>
  <Button>按钮3</Button>
</Space>

主轴对齐方式

<Space class="justify-center" block>
  <Button class="h-auto py-2">1</Button>
  <Button class="h-auto py-2">2<br />2</Button>
  <Button class="h-auto py-2">3<br />3<br />3</Button>
</Space>

交叉轴对齐方式

<Space class="items-end" block>
  <Button class="h-auto py-2">1</Button>
  <Button class="h-auto py-2">2<br />2</Button>
  <Button class="h-auto py-2">3<br />3<br />3</Button>
</Space>

Space

属性