### Горизонтальное отображение с переполнением 
```tsx
import React from 'react';
import { Flow } from '@salutejs/plasma-web';
export function App() {
const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];
const style = (index) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: `${2 + numbers[index].length}ch`,
height: '25px',
backgroundColor: '#999',
borderRadius: '10px',
});
return (
<div>
<Flow mainAxisGap="0.5ch" crossAxisGap="1ch" style={{ width: '15ch' }} >
{Array(6)
.fill(0)
.map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
</Flow>
</div>
);
}
```
### Вертикальное отображение с переполнением 
```tsx
import React from 'react';
import { Flow } from '@salutejs/plasma-web';
export function App() {
const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];
const style = (index) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: `${2 + numbers[index].length}ch`,
height: '25px',
backgroundColor: '#999',
borderRadius: '10px',
});
return (
<div>
<Flow
alignment="center"
orientation="vertical"
mainAxisGap="0.5ch"
crossAxisGap="1ch"
style={{ height: '90px' }}
>
{Array(6)
.fill(0)
.map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
</Flow>
</div>
);
}
```
### Отображение с разбиением на строки С ограничением количества элементов в строке. 
```tsx
import React from 'react';
import { Flow } from '@salutejs/plasma-web';
export function App() {
const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];
const style = (index) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: `${2 + numbers[index].length}ch`,
height: '25px',
backgroundColor: '#999',
borderRadius: '10px',
});
return (
<div>
<Flow
arrangement="end"
itemsPerLine={2}
mainAxisGap="0.5ch"
crossAxisGap="1ch"
>
{Array(6)
.fill(0)
.map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
</Flow>
</div>
);
}
```