You can use align to set the alignment, optional: start, center（default）, end, baseline.
import React from 'react';
import { Space, Button, Tag } from '@douyinfe/semi-ui';
() => {
const divStyle = {
width: 80,
height: 100,
lineHight: 100,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '1px solid var(--semi-color-border)',
borderRadius: 3
};
return (
<Space vertical>
<Space align='start'>
<div style={divStyle}> text </div>
<Button theme='solid' type='primary'>button</Button>
<Tag color='green' size='large'> tag </Tag>
</Space>
<Space align='center'>
<div style={divStyle}> text </div>
<Button theme='solid' type='primary'>button</Button>
<Tag color='green' size='large'> tag </Tag>
</Space>
<Space align='end'>
<div style={divStyle}> text </div>
<Button theme='solid' type='primary'>button</Button>
<Tag color='green' size='large'> tag </Tag>
</Space>
<Space align='baseline'>
<div style={divStyle}> text </div>
<Button theme='solid' type='primary'>button</Button>
<Tag color='green' size='large'> tag </Tag>
</Space>
</Space>
);
};
Spacing
You can use spacing to set the spacing size, optional: tight (8px, default), medium (16px), loose (24px), and allow to pass in number to customize the spacing size, and also support to pass in array to set the horizontal and vertical spacing at the same time.