 <Flex gap="3">
  <Box style={{ width: 64, height: 64, backgroundColor: 'var(--gray-a6)' }} />
  <Box style={{ width: 64, height: 64, backgroundColor: 'var(--gray-a6)' }} />
  <Box style={{ width: 64, height: 64, backgroundColor: 'var(--gray-a6)' }} />
  <Box style={{ width: 64, height: 64, backgroundColor: 'var(--gray-a6)' }} />
  <Box style={{ width: 64, height: 64, backgroundColor: 'var(--gray-a6)' }} />
  <Box style={{ width: 64, height: 64, backgroundColor: 'var(--gray-a6)' }} />
</Flex>

Props

No props data available for Flex.

Usage

Direction

Use the direction prop to set the flex direction. You can change it across breakpoints using the object syntax.

 <Flex gap="2" direction={{ initial: 'column', sm: 'row' }}>
  <FigmaLogoIcon width="24" height="24" />
  <FramerLogoIcon width="24" height="24" />
  <SketchLogoIcon width="24" height="24" />
</Flex>

Alignment

Use the align prop to set the alignment of the flex items across the flex direction. Use the justify prop to control how space is distributed between items along the flex direction.

You can change the values across breakpoints using the object syntax.

We do not plan to implement props for align-self and justify-self. UI code tends to be easier to understand and debug when parent components control the layout. Nesting Flex elements is the way to go when you need different alignment within one container.

 <Flex align="center" gap="2">
  <CubeIcon />
  <Text size="2" weight="bold">
    Elixir SDK
  </Text>
  <Badge color="blue">New</Badge>
</Flex>

Wrap

Use the wrap prop to control whether the flex items wrap to the next line. You can change the wrapping behaviour across breakpoints using the object syntax.

 <Flex wrap="wrap" gap="5">
  <AccessibilityIcon />
  <ActivityLogIcon />
  <AlignBaselineIcon />
  <AllSidesIcon />
  <AngleIcon />
  <ArchiveIcon />
  <ArrowBottomLeftIcon />
  <ArrowBottomRightIcon />
  <ArrowDownIcon />
  <ArrowLeftIcon />
  <ArrowRightIcon />
  <ArrowTopLeftIcon />
  <ArrowTopRightIcon />
  <ArrowUpIcon />
  <AspectRatioIcon />
  <AvatarIcon />
  <BackpackIcon />
  <BadgeIcon />
  <BarChartIcon />
  <BellIcon />
  <BlendingModeIcon />
  <BookmarkIcon />
  <BookmarkFilledIcon />
  <BorderDashedIcon />
  <BorderDottedIcon />
  <BorderAllIcon />
  <BorderBottomIcon />
  <BorderLeftIcon />
  <BorderNoneIcon />
  <BorderRightIcon />
  <BorderSolidIcon />
  <BorderSplitIcon />
  <BorderStyleIcon />
  <BorderTopIcon />
  <BorderWidthIcon />
  <BoxIcon />
  <BoxModelIcon />
  <ButtonIcon />
</Flex>

Gap

Use the gap prop to set spacing between flex items. You can change the gap across breakpoints using the object syntax.

In the spirit of lifting layout responsibilities onto parent components, consider spacing elements using Flex with the gap prop instead of margins on the individual items.

 <Flex direction="column" gap="2">
  <Text size="2">Introduction</Text>
  <Text size="2">What you’ll build</Text>
  <Text size="2">Before getting started</Text>
  <Text size="2">API object definitions</Text>
</Flex>

Variants

Context

Usage

Used 2687 times across 2 packages

Dashboard

2314

Admin Portal

373

Variant Distribution

align

center

92%

start

stretch

end

baseline

justify

between

35%

end

34%

center

29%

start

direction

column

96%

row

gap

10%

43%

16%

19%

2px

1px

6px

wrap

100%

position

relative

63%

absolute

25%

sticky

fixed

Where it's used

714 files

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx58

packages/dashboard/src/components/get-started/get-started.tsx41

packages/dashboard/src/components/authentication/configure-email-password-dialog.tsx30

packages/dashboard/src/components/organizations/organization/domain-policy-dialog.tsx21

packages/dashboard/src/components/directory-sync/directory-group-sync/allow-list-v2.tsx20

packages/dashboard/src/components/emails/providers/manage-custom-email-provider-dialog.tsx17

packages/dashboard/src/legacy-pages/settings/billing.tsx17

packages/dashboard/src/components/authentication/configure-session/configure-sessions-dialog.tsx16

packages/dashboard/src/components/emails/providers/configure-custom-email-provider-dialog.tsx16

/p/:portalSessionId/directory-sync/:directoryId/google-workspace/filter-groups-v2

packages/admin-portal/src/app/p/[portalSessionId]/directory-sync/[directoryId]/google-workspace/filter-groups-v2/filter-groups-section.tsx29

Show 704 more files

Flex

On this page

Props

Usage

Direction

Alignment

Wrap

Gap

Variants

Context

Usage Statistics

Usage

Variant Distribution

Where it's used