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>
);
}Flex container content.
Justify content alignment. Also available as responsive variants: $xsJustifyContent, $smJustifyContent, $mdJustifyContent, $lgJustifyContent, $xlJustifyContent, $xxlJustifyContent, $xxxlJustifyContent.
Flex wrap behavior.
Gap between flex items. Also available as responsive variants: $xsGap, $smGap, $mdGap, $lgGap, $xlGap, $xxlGap, $xxxlGap.
Cherry theme object.