<Box>
  <Flex flexWrap="wrap" alignItems="center" height={500}>
    <Text mb={0} style={{ alignSelf: 'flex-end' }}>
      SpaceAround
    </Text>
    <Flex minWidth={'100%'} justifyContent={'space-around'}>
      <BorderBox bg={'green.3'} size={20}></BorderBox>
      <BorderBox bg={'blue.3'} size={20}></BorderBox>
      <BorderBox bg={'orange.3'} size={20}></BorderBox>
      <BorderBox bg={'gray.3'} size={20}></BorderBox>
    </Flex>
    <Text mb={0} style={{ alignSelf: 'flex-end' }}>
      SpaceBetween
    </Text>
    <Flex minWidth={'100%'} justifyContent={'space-between'}>
      <BorderBox bg={'green.3'} size={20}></BorderBox>
      <BorderBox bg={'blue.3'} size={20}></BorderBox>
      <BorderBox bg={'orange.3'} size={20}></BorderBox>
      <BorderBox bg={'gray.3'} size={20}></BorderBox>
    </Flex>
    <Text mb={0} style={{ alignSelf: 'flex-end' }}>
      SpaceEvenly
    </Text>
    <Flex minWidth={'100%'} justifyContent={'space-evenly'}>
      <BorderBox bg={'green.3'} size={20}></BorderBox>
      <BorderBox bg={'blue.3'} size={20}></BorderBox>
      <BorderBox bg={'orange.3'} size={20}></BorderBox>
      <BorderBox bg={'gray.3'} size={20}></BorderBox>
    </Flex>
  </Flex>
</Box>