diff --git a/client/src/shared/ui/flex/flex.module.scss b/client/src/shared/ui/flex/flex.module.scss
index d1a5032ce..e020802a0 100644
--- a/client/src/shared/ui/flex/flex.module.scss
+++ b/client/src/shared/ui/flex/flex.module.scss
@@ -1,3 +1,16 @@
.flexWrapper {
display: flex;
+ /* align-items: var(--align, normal);
+ justify-content: var(--justify, normal);
+ gap: var(--gap, 0);
+ margin: var(--margin, 0);
+ padding: var(--padding, 0);
+ flex-direction: var(--direction, row);
+ max-height: var(--maxHeight, none);
+ position: var(--position, static);
+ width: var(--width, 100%);
+ max-width: var(--maxWidth, none);
+ height: var(--height, auto);
+ flex-wrap: nowrap;
+ flex-shrink: unset; */
}
diff --git a/client/src/shared/ui/flex/flex.stories.tsx b/client/src/shared/ui/flex/flex.stories.tsx
index d757961a4..3880ae87e 100644
--- a/client/src/shared/ui/flex/flex.stories.tsx
+++ b/client/src/shared/ui/flex/flex.stories.tsx
@@ -14,6 +14,8 @@ const flexProps: FlexProps = {
width: '100%',
maxWidth: '500px',
height: 'auto',
+ wrap: 'nowrap',
+ shrink: 'unset',
children:
Item 1
,
};
diff --git a/client/src/shared/ui/flex/flex.tsx b/client/src/shared/ui/flex/flex.tsx
index 30bac25c6..022c50830 100644
--- a/client/src/shared/ui/flex/flex.tsx
+++ b/client/src/shared/ui/flex/flex.tsx
@@ -47,6 +47,19 @@ export interface FlexProps {
* [props.height] - The height property defines the height of the component. Default is 'auto'.
*/
height?: string;
+
+ /**
+ * [props.flexWrap] - The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in. Default is 'nowrap'
+
+ */
+ wrap?: string;
+
+ /**
+ * [props.flexShrink] - Sets the flex shrink factor. Negative numbers are invalid. Default is 'nowrap'
+
+ */
+ shrink?: string | number;
+
/**
* props.children - The content to be laid out.
*/
@@ -71,6 +84,8 @@ export interface FlexProps {
* width="100%"
* maxWidth="500px"
* height="auto"
+ * wrap="wrap"
+ * shrink={1}
* >
* Item 1
* Item 2
@@ -91,6 +106,8 @@ export const Flex: React.FC = props => {
width,
maxWidth,
height,
+ wrap,
+ shrink,
children,
} = props;
@@ -106,6 +123,8 @@ export const Flex: React.FC = props => {
width: width,
maxWidth: maxWidth,
height: height,
+ flexWrap: wrap,
+ flexShrink: shrink,
} as React.CSSProperties;
return (