import : 
import * as React from 'react';
import Stack from '@mui/material/Stack';

component : column
Item 1
Item 2
Item 3

<Stack spacing={2}>
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>

component : column-reverse
Item 1
Item 2
Item 3

<Stack direction="column-reverse" spacing={2} >
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>

component : row
Item 1
Item 2
Item 3

<Stack direction="row" spacing={2} >
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>

component : row-reverse
Item 1
Item 2
Item 3

<Stack direction="row-reverse" spacing={2} >
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>

component : justify content
Item 1
Item 2
Item 3

<Stack direction="row" spacing={2} sx={justifyContent: "flex-start",} >
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>
Item 1
Item 2
Item 3

<Stack direction="row" spacing={2} sx={justifyContent: "center",} >
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>
Item 1
Item 2
Item 3

<Stack direction="row" spacing={2} sx={justifyContent: "flex-end",} >
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>

component : divider
import : 
import Divider from '@mui/material/Divider';
Item 1
Item 2
Item 3

<Stack spacing={2} divider={<Divider orientation="horizon" flexItem/>}>
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>
Item 1
Item 2
Item 3

<Stack direction="row" spacing={2} divider={<Divider orientation="vertical" flexItem/>}>
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>

component : breakpoints
Item 1
Item 2
Item 3

<Stack direction={{xs: 'column', sm: 'row' }} spacing={{xs: 1, sm: 2, md: 4}} >
      {Array.from(Array(3)).map((_, index)) => (
            <Box key={index} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} >
                  Item {index + 1}
            </Box>
      ))}
</Stack>