tech(Flex): add support flex with gap

packages/vkui/src/components/Flex/Flex.module.css

@@ -13,13 +13,31 @@
   margin-block: var(--vkui--size_base_padding_vertical--regular);
 }
 
-.withGaps {
-  margin-block-start: calc(
-    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-  );
-  margin-inline-start: calc(
-    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-  );
+/*TODO [>=8]: Проверить браузерную поддержку gap*/
+/*Данная проверка позволяет максимально близко определить поддерживается ли gap + flex*/
+/*см. https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1758459996*/
+/*Поддержка inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset#browser_compatibility*/
+/*Поддержка gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility*/
+@supports (inset: 0) {
+  .host {
+    gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
+  }
+}
+@supports not (inset: 0) {
+  .withGaps {
+    margin-block-start: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    );
+    margin-inline-start: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    );
+  }
+
+  /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+  .withGaps.withGaps > * {
+    margin-block-start: var(--vkui_internal--row_gap);
+    margin-inline-start: var(--vkui_internal--column_gap);
+  }
 }
 
 .host > .marginAuto {
@@ -90,9 +108,3 @@
 .alignBaseline {
   align-items: baseline;
 }
-
-/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
-.withGaps.withGaps > * {
-  margin-block-start: var(--vkui_internal--row_gap);
-  margin-inline-start: var(--vkui_internal--column_gap);
-}

packages/vkui/src/components/Flex/Flex.stories.tsx

@@ -7,24 +7,54 @@ import { Button } from '../Button/Button';
 import { Image } from '../Image/Image';
 import { Flex, type FlexProps } from './Flex';
 
-const story: Meta<FlexProps> = {
+type StoryProps = FlexProps & {
+  /**
+   * Отступ между строками
+   */
+  rowGap?: number;
+  /**
+   * Отступ между столбцами
+   */
+  columnGap?: number;
+  /**
+   * Количество элементов
+   */
+  itemsCount?: number;
+};
+
+const story: Meta<StoryProps> = {
   title: 'Layout/Flex',
   component: Flex,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  argTypes: {
+    rowGap: {
+      control: 'number',
+    },
+    columnGap: {
+      control: 'number',
+    },
+    itemsCount: {
+      control: 'number',
+    },
+  },
 };
 
 export default story;
 
-type Story = StoryObj<FlexProps>;
+type Story = StoryObj<StoryProps>;
 
 export const Playground: Story = {
   args: {
     gap: 'm',
+    itemsCount: 2,
     style: { height: '100%' },
   },
-  render: (args) => (
-    <Flex {...args}>
-      {Array.from({ length: 2 }, (_, index) => {
+  render: ({ itemsCount = 2, rowGap, columnGap, gap, ...args }) => (
+    <Flex
+      gap={rowGap !== undefined || columnGap !== undefined ? [rowGap || 0, columnGap || 0] : gap}
+      {...args}
+    >
+      {Array.from({ length: itemsCount }, (_, index) => {
         return (
           <Banner
             key={index}

packages/vkui/src/components/Flex/Flex.tsx

@@ -87,7 +87,7 @@ export const Flex: React.FC<FlexProps> & {
   ...props
 }: FlexProps) => {
   const withGaps = Children.count(children) > 1 && gap;
-  const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);
+  const [rowGap, columnGap] = calculateGap(gap);
 
   return (
     <RootComponent

packages/vkui/src/components/Flex/Readme.md

@@ -1,5 +1,30 @@
 Базовый компонент для позиционирования элементов. Построен на базе `flex layout`.
 
+> ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании
+> свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется fallback логика с использованием свойства `margin`.
+>
+> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддерживают `gap` на `flex` контейнерах:
+>
+> Избегайте использования `React.Fragment` в качестве `children`. Например, следующий кейс будет работать некорректно - у него не сработает `gap`:
+>
+> ```jsx static
+> <Flex gap="m">
+>   <React.Fragment>
+>     <div>1</div>
+>     <div>2</div>
+>   </React.Fragment>
+> </Flex>
+> ```
+>
+> Нужно, чтобы у Flex было несколько непосредственных потомков:
+>
+> ```jsx static
+> <Flex gap="m">
+>   <div>1</div>
+>   <div>2</div>
+> </Flex>
+> ```
+
 ```jsx { "props": { "layout": false, "iframe": false } }
 const FlexContainer = ({ itemsCount, ...props }) => {
   return (