# Flex
> Cherry Flex component - responsive flexbox layouts with gap and alignment control.
Source: https://cherry.al/code/flex
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# 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.
```jsx
import React from "react";
import { Flex, Box } from "cherry-styled-components";
export default function Page() {
return (
BoxBox
);
}
```
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:
```jsx
import React from "react";
import { Flex, Box } from "cherry-styled-components";
export default function Page() {
return (
BoxBox
);
}
```
## 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.