OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Flex

A component for creating flex layouts.

 <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>

API Reference

Use these props to create flex layouts.

Prop	Type	Default
`display`	`Responsive<"none" \| "inline-flex" \| "flex">`	`"flex"`
`direction`	`Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">`	`–`
`align`	`Responsive<"start" \| "center" \| "end" \| "baseline" \| "stretch">`	`–`
`justify`	`Responsive<"start" \| "center" \| "end" \| "between">`	`"start"`
`wrap`	`Responsive<"nowrap" \| "wrap" \| "wrap-reverse">`	`—`
`gap`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`

The following props are shared between Box, Container, Flex, Grid, and Section layout components.

Prop	Type	Default
`position`	`Responsive<"static" \| "relative" \| "absolute" \| "fixed" \| "sticky">`	`—`
`inset`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`top`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`bottom`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`left`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`right`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`p`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`py`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`px`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`pt`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`pb`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`pl`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`pr`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`width`	`Responsive<string>`	`—`
`minWidth`	`Responsive<string>`	`—`
`maxWidth`	`Responsive<string>`	`—`
`height`	`Responsive<string>`	`—`
`minHeight`	`Responsive<string>`	`—`
`maxHeight`	`Responsive<string>`	`—`
`gridColumn`	`Responsive<string>`	`—`
`gridColumnStart`	`Responsive<string>`	`—`
`gridColumnEnd`	`Responsive<string>`	`—`
`gridRow`	`Responsive<string>`	`—`
`gridRowStart`	`Responsive<string>`	`—`
`gridRowEnd`	`Responsive<string>`	`—`
`flexShrink`	`Responsive<Union<string, "0" \| "1">>`	`—`
`flexGrow`	`Responsive<Union<string, "0" \| "1">>`	`—`

This component is based on the div element and also supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

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.

Elixir SDKNew

 <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.

IntroductionWhat you’ll buildBefore getting startedAPI object definitions

 <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>