Flex

Live Editor

function FlexDemo() {
  return (
    <ThemeProvider>
      <Flex direction={{ initial: 'column', md: 'row' }} gap="1rem" align="center">
        <div>One</div>
        <div>Two</div>
      </Flex>
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

direction, align, justify, wrap, gap, rowGap, columnGap, display, headless