Radix2Solid

Flex

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

<Flex gap="3">

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<DecorativeBox />

	</Box>

	<Box width="64px" height="64px">

		<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
as"div" | "span""div"
asChildboolean—
displayResponsive<"none" | "inline-flex" | "flex">—
directionResponsive<enum>—
alignResponsive<enum>—
justifyResponsive<"start" | "center" | "end" | "between">—
wrapResponsive<"nowrap" | "wrap" | "wrap-reverse">—
gapResponsive<enum | string>—
gapXResponsive<enum | string>—
gapYResponsive<enum | string>—

The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.

PropTypeDefault
pResponsive<enum | string>—
pxResponsive<enum | string>—
pyResponsive<enum | string>—
ptResponsive<enum | string>—
prResponsive<enum | string>—
pbResponsive<enum | string>—
plResponsive<enum | string>—
widthResponsive<string>—
minWidthResponsive<string>—
maxWidthResponsive<string>—
heightResponsive<string>—
minHeightResponsive<string>—
maxHeightResponsive<string>—
positionResponsive<enum>—
insetResponsive<enum | string>—
topResponsive<enum | string>—
rightResponsive<enum | string>—
bottomResponsive<enum | string>—
leftResponsive<enum | string>—
overflowResponsive<enum>—
overflowXResponsive<enum>—
overflowYResponsive<enum>—
flexBasisResponsive<string>—
flexShrinkResponsive<enum | string>—
flexGrowResponsive<enum | string>—
gridAreaResponsive<string>—
gridColumnResponsive<string>—
gridColumnStartResponsive<string>—
gridColumnEndResponsive<string>—
gridRowResponsive<string>—
gridRowStartResponsive<string>—
gridRowEndResponsive<string>—
alignSelfResponsive<enum>—
justifySelfResponsive<enum>—