Falcon UI

flexLayout

FlexLayout component is rendered by default as a <div> with display: flex and accepts other responsive, theme-based style props such as (justifyContent, flexDirection etc).

xxxxxxxxxx
 
import { FlexLayout } from '@deity/falcon-ui';

c 1

c 2

c 3

 
<FlexLayout justifyContent="space-between">
  <Box boxShadow="subtle" p="xl" flex={1} m="md">
    c 1
  </Box>
  <Box boxShadow="subtle" p="xl" flex={2} m="md">
    c 2
  </Box>
  <Box boxShadow="subtle" p="xl" flex={1} m="md">
    c 3
  </Box>
</FlexLayout>