Stack

Direction

One
Two
Three
1import { Stack } from 'layout-ui';
2
3render(
4  <Card>
5    <Stack gap="4px" direction="horizontal">
6      <Box>One</Box>
7      <Box>Two</Box>
8      <Box>Three</Box>
9    </Stack>
10  </Card>,
11);

One
Two
Three
1import { Stack } from 'layout-ui';
2
3render(
4  <Card>
5    <Stack gap="4px" direction="vertical">
6      <Box>One</Box>
7      <Box>Two</Box>
8      <Box>Three</Box>
9    </Stack>
10  </Card>,
11);

Alignment (main axis)

One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
1import { Stack } from 'layout-ui';
2
3render(
4  <Stack gap="16px" direction="vertical">
5    <Card>
6      <Stack gap="4px" direction="horizontal" align="start" width="400px">
7        <Box>One</Box>
8        <Box>Two</Box>
9        <Box>Three</Box>
10      </Stack>
11    </Card>
12    <Card>
13      <Stack gap="4px" direction="horizontal" align="center" width="400px">
14        <Box>One</Box>
15        <Box>Two</Box>
16        <Box>Three</Box>
17      </Stack>
18    </Card>
19    <Card>
20      <Stack gap="4px" direction="horizontal" align="end" width="400px">
21        <Box>One</Box>
22        <Box>Two</Box>
23        <Box>Three</Box>
24      </Stack>
25    </Card>
26    <Card>
27      <Stack gap="4px" direction="horizontal" align="space-between" width="400px">
28        <Box>One</Box>
29        <Box>Two</Box>
30        <Box>Three</Box>
31      </Stack>
32    </Card>
33    <Card>
34      <Stack gap="4px" direction="horizontal" align="space-evenly" width="400px">
35        <Box>One</Box>
36        <Box>Two</Box>
37        <Box>Three</Box>
38      </Stack>
39    </Card>
40    <Card>
41      <Stack gap="4px" direction="horizontal" align="space-around" width="400px">
42        <Box>One</Box>
43        <Box>Two</Box>
44        <Box>Three</Box>
45      </Stack>
46    </Card>
47    <Card>
48      <Stack gap="4px" direction="horizontal" align="stretch" width="400px">
49        <Box>One</Box>
50        <Box>Two</Box>
51        <Box>Three</Box>
52      </Stack>
53    </Card>
54  </Stack>,
55);

One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
1import { Stack } from 'layout-ui';
2
3render(
4  <Stack gap="16px" direction="horizontal">
5    <Card>
6      <Stack gap="4px" direction="vertical" align="start" height="200px">
7        <Box>One</Box>
8        <Box>Two</Box>
9        <Box>Three</Box>
10      </Stack>
11    </Card>
12    <Card>
13      <Stack gap="4px" direction="vertical" align="center" height="200px">
14        <Box>One</Box>
15        <Box>Two</Box>
16        <Box>Three</Box>
17      </Stack>
18    </Card>
19    <Card>
20      <Stack gap="4px" direction="vertical" align="end" height="200px">
21        <Box>One</Box>
22        <Box>Two</Box>
23        <Box>Three</Box>
24      </Stack>
25    </Card>
26    <Card>
27      <Stack gap="4px" direction="vertical" align="space-between" height="200px">
28        <Box>One</Box>
29        <Box>Two</Box>
30        <Box>Three</Box>
31      </Stack>
32    </Card>
33    <Card>
34      <Stack gap="4px" direction="vertical" align="space-evenly" height="200px">
35        <Box>One</Box>
36        <Box>Two</Box>
37        <Box>Three</Box>
38      </Stack>
39    </Card>
40    <Card>
41      <Stack gap="4px" direction="vertical" align="space-around" height="200px">
42        <Box>One</Box>
43        <Box>Two</Box>
44        <Box>Three</Box>
45      </Stack>
46    </Card>
47    <Card>
48      <Stack gap="4px" direction="vertical" align="stretch" height="200px">
49        <Box>One</Box>
50        <Box>Two</Box>
51        <Box>Three</Box>
52      </Stack>
53    </Card>
54  </Stack>,
55);

Alignment (cross axis)

One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
1import { Stack } from 'layout-ui';
2
3render(
4  <Stack gap="16px">
5    <Card>
6      <Stack gap="4px" direction="horizontal" alignY="start" height="100px">
7        <Box>One</Box>
8        <Box>Two</Box>
9        <Box>Three</Box>
10      </Stack>
11    </Card>
12    <Card>
13      <Stack gap="4px" direction="horizontal" alignY="center" height="100px">
14        <Box>One</Box>
15        <Box>Two</Box>
16        <Box>Three</Box>
17      </Stack>
18    </Card>
19    <Card>
20      <Stack gap="4px" direction="horizontal" alignY="end" height="100px">
21        <Box>One</Box>
22        <Box>Two</Box>
23        <Box>Three</Box>
24      </Stack>
25    </Card>
26    <Card>
27      <Stack gap="4px" direction="horizontal" alignY="stretch" height="100px">
28        <Box>One</Box>
29        <Box>Two</Box>
30        <Box>Three</Box>
31      </Stack>
32    </Card>
33  </Stack>,
34);

One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
1import { Stack } from 'layout-ui';
2
3render(
4  <Stack gap="16px">
5    <Card>
6      <Stack gap="4px" direction="vertical" alignY="start" width="400px">
7        <Box>One</Box>
8        <Box>Two</Box>
9        <Box>Three</Box>
10      </Stack>
11    </Card>
12    <Card>
13      <Stack gap="4px" direction="vertical" alignY="center" width="400px">
14        <Box>One</Box>
15        <Box>Two</Box>
16        <Box>Three</Box>
17      </Stack>
18    </Card>
19    <Card>
20      <Stack gap="4px" direction="vertical" alignY="end" width="400px">
21        <Box>One</Box>
22        <Box>Two</Box>
23        <Box>Three</Box>
24      </Stack>
25    </Card>
26    <Card>
27      <Stack gap="4px" direction="vertical" alignY="stretch" width="400px">
28        <Box>One</Box>
29        <Box>Two</Box>
30        <Box>Three</Box>
31      </Stack>
32    </Card>
33  </Stack>,
34);