Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Flex

Component for creating flex layouts.

View sourceReport an issue
<Flex gap="3">

  <Box width="9" height="9">

    <DecorativeBox />

  </Box>

  <Box width="9" height="9">

    <DecorativeBox />

  </Box>

  <Box width="9" height="9">

    <DecorativeBox />

  </Box>

  <Box width="9" height="9">

    <DecorativeBox />

  </Box>

  <Box width="9" height="9">

    <DecorativeBox />

  </Box>

</Flex>

API Reference

This component is based on the div element and supports common margin props.

Use these props to create flex layouts.

PropTypeDefault
asChild
boolean
false
display
Responsive<"none" | "inline-flex" | "flex">
"flex"
direction
Responsive<"row" | "column" | "row-reverse" | "column-reverse">
No default value
align
Responsive<"start" | "center" | "end" | "baseline" | "stretch">
No default value
justify
Responsive<"start" | "center" | "end" | "between">
"start"
wrap
Responsive<"nowrap" | "wrap" | "wrap-reverse">
No default value
gap
enum
No default value

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

PropTypeDefault
p
enum
No default value
px
enum
No default value
py
enum
No default value
pt
enum
No default value
pr
enum
No default value
pb
enum
No default value
pl
enum
No default value
position
Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky">
No default value
inset
Responsive<"auto" | "0" | "50%" | "100%">
No default value
top
Responsive<"auto" | "0" | "50%" | "100%">
No default value
right
Responsive<"auto" | "0" | "50%" | "100%">
No default value
bottom
Responsive<"auto" | "0" | "50%" | "100%">
No default value
left
Responsive<"auto" | "0" | "50%" | "100%">
No default value
width
enum
No default value
height
enum
No default value
shrink
Responsive<"0" | "1">
No default value
grow
Responsive<"0" | "1">
No default value
PreviousBox
NextGrid
Edit this page on GitHub.