Flex
The Flex component is a flexible container for creating responsive layouts. It's useful for arranging child elements in a row or column, adjusting the gap between them, and controlling alignment. Flex adapts to different screen sizes with responsive props like $xsGap and $smJustifyContent. 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>
);
}Responsive variants apply from their breakpoint upwards. This example stacks the boxes in a column, then switches to a centered row from the lg breakpoint:
import React from "react";
import { Flex, Box } from "cherry-styled-components";
export default function Page() {
return (
<Flex $direction="column" $lgDirection="row" $lgJustifyContent="center">
<Box>Box</Box>
<Box>Box</Box>
</Flex>
);
}Properties
Flex container content.
Justify content alignment along the main axis. Defaults to "flex-start". Also available as responsive variants: $xsJustifyContent, $smJustifyContent, $mdJustifyContent, $lgJustifyContent, $xlJustifyContent, $xxlJustifyContent, $xxxlJustifyContent.
Align items along the cross axis. Defaults to "stretch". Also available as responsive variants: $xsAlignItems, $smAlignItems, $mdAlignItems, $lgAlignItems, $xlAlignItems, $xxlAlignItems, $xxxlAlignItems.
Align content distributes wrapped lines along the cross axis. Defaults to "stretch". Also available as responsive variants: $xsAlignContent, $smAlignContent, $mdAlignContent, $lgAlignContent, $xlAlignContent, $xxlAlignContent, $xxxlAlignContent.
Flex wrap behavior. Defaults to "wrap".
Gap between flex items. Defaults to the theme's gridGap (20px, and 40px from the lg breakpoint). Also available as responsive variants: $xsGap, $smGap, $mdGap, $lgGap, $xlGap, $xxlGap, $xxxlGap. Note that on the base $gap, "none" behaves like undefined, so the theme default still applies; only the responsive variants map "none" to 0.
Flex direction. Defaults to "row". Also available as responsive variants: $xsDirection, $smDirection, $mdDirection, $lgDirection, $xlDirection, $xxlDirection, $xxxlDirection.
Makes the flex container span the full width of its parent.
Flex also accepts all standard div attributes (className, id, onClick, etc.) and forwards its ref to the underlying div element.