import { Flex } from "@dreamy-ui/react/rsc";

<Flex color="white" w="full" h="100px">
  <Flex center bg="green.400" w="100px" color='black/87'>
    1
   </Flex>
  <Flex center bg="blue.400" w="1/3">
    2
  </Flex>
  <Flex center bg="purple.400" flex={1}>
    3
  </Flex>
</Flex>

<Flex wFull contentBetween itemsCenter>
    <Heading>Flex</Heading>
    <Button variant="primary">
        Button
    </Button>
</Flex>

<Flex w="full" justifyContent="space-between" alignItems="center">
    <Heading>Flex</Heading>
    <Button variant="primary">
        Button
    </Button>
</Flex>

<Flex 
    className={css({
      w: "full",
      justifyContent: "space-between",
      alignItems: "center"
    })}
>
    <Heading>Flex</Heading>
    <Button variant="primary">
        Button
    </Button>
</Flex>