Flex

import Flex from '@cronocode/react-box/components/flex';

<Flex gap={4} ai="center">
  <Box p={4} bgColor="violet-400" borderRadius={1} color="white">Item 1</Box>
  <Box p={4} bgColor="violet-500" borderRadius={1} color="white">Item 2</Box>
  <Box p={4} bgColor="violet-600" borderRadius={1} color="white">Item 3</Box>
</Flex>

<Flex d="column" gap={4}>
  <Box p={4} bgColor="indigo-400" borderRadius={1} color="white">Row 1</Box>
  <Box p={4} bgColor="indigo-500" borderRadius={1} color="white">Row 2</Box>
  <Box p={4} bgColor="indigo-600" borderRadius={1} color="white">Row 3</Box>
</Flex>

<Flex jc="space-between" ai="center" p={4} bgColor="slate-100" borderRadius={1}>
  <Box p={3} bgColor="emerald-500" borderRadius={1} color="white">Start</Box>
  <Box p={3} bgColor="emerald-500" borderRadius={1} color="white">Middle</Box>
  <Box p={3} bgColor="emerald-500" borderRadius={1} color="white">End</Box>
</Flex>

<Flex gap={4} flexWrap="wrap">
  {[1, 2, 3, 4, 5, 6].map(i => (
    <Box key={i} p={4} width={24} bgColor="sky-500" borderRadius={1} color="white" textAlign="center">
      {i}
    </Box>
  ))}
</Flex>