Components

Flex

Component for creating flex layouts.

<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
asChildbooleanfalse
displayResponsive<"none" | "inline-flex" | "flex">"flex"
directionResponsive<"row" | "column" | "row-reverse" | "column-reverse">No default value
alignResponsive<"start" | "center" | "end" | "baseline" | "stretch">No default value
justifyResponsive<"start" | "center" | "end" | "between">"start"
wrapResponsive<"nowrap" | "wrap" | "wrap-reverse">No default value
gapenumNo default value

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

PropTypeDefault
penumNo default value
pxenumNo default value
pyenumNo default value
ptenumNo default value
prenumNo default value
pbenumNo default value
plenumNo default value
positionResponsive<"static" | "relative" | "absolute" | "fixed" | "sticky">No default value
insetResponsive<"auto" | "0" | "50%" | "100%">No default value
topResponsive<"auto" | "0" | "50%" | "100%">No default value
rightResponsive<"auto" | "0" | "50%" | "100%">No default value
bottomResponsive<"auto" | "0" | "50%" | "100%">No default value
leftResponsive<"auto" | "0" | "50%" | "100%">No default value
widthenumNo default value
heightenumNo default value
shrinkResponsive<"0" | "1">No default value
growResponsive<"0" | "1">No default value
PreviousBox
NextGrid