The Flex component is a flexible container that allows you to create responsive layouts with ease. It’s particularly useful for arranging child elements in a row or column, adjusting the gap between them, and controlling their alignment.
The Flex component adapts to different screen sizes for example $xsGap, $smJustifyContent: Customize the gap and alignment for specific screen sizes using media queries. You will see this pattern throughout the Cherry Design System.
import React from "react";
import { Flex, Box } from "cherry-styled-components";
export default function Page() {
return (
<Flex $justifyContent="center">
<Box>Box</Box>
<Box>Box</Box>
</Flex>
);
}
| Property | Description |
|---|---|
| children? | React.ReactNode |
| $justifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $xsJustifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $smJustifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $mdJustifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $lgJustifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $xlJustifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $xxlJustifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $xxxlJustifyContent? | "center" | "flex-start" | "flex-end | "space-between" | "space-around" | "space-evenly" |
| $wrap? | "wrap" | "nowrap" | "wrap-reverse" |
| $gap? | number | "none" |
| $xsGap? | number | "none" |
| $smGap? | number | "none" |
| $mdGap? | number | "none" |
| $lgGap? | number | "none" |
| $xlGap? | number | "none" |
| $xxlGap? | number | "none" |
| $xxxlGap? | number | "none" |
| theme? | Theme |
Explore the source code on GitHub: