From 8634cdf6a88ce711550ad332b419f38e46448be3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 23 Jan 2024 17:23:58 +0800
Subject: [PATCH] chore: add flex css var

---
 components/grid/col.tsx                  | 18 ++++++++++++++++--
 components/grid/demo/responsive-flex.md  |  7 +++++++
 components/grid/demo/responsive-flex.tsx | 24 ++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 components/grid/demo/responsive-flex.md
 create mode 100644 components/grid/demo/responsive-flex.tsx

diff --git a/components/grid/col.tsx b/components/grid/col.tsx
index ab132c196f..75f3b6209b 100644
--- a/components/grid/col.tsx
+++ b/components/grid/col.tsx
@@ -70,6 +70,9 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
 
   const [wrapCSSVar, hashId, cssVarCls] = useColStyle(prefixCls);
 
+  // ===================== Size ======================
+  const sizeStyle: Record<string, string> = {};
+
   let sizeClassObj = {};
   sizes.forEach((size) => {
     let sizeProps: ColSize = {};
@@ -90,11 +93,16 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
         sizeProps.offset || sizeProps.offset === 0,
       [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
       [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
-      [`${prefixCls}-${size}-flex-${sizeProps.flex}`]: sizeProps.flex || sizeProps.flex === 'auto',
       [`${prefixCls}-rtl`]: direction === 'rtl',
     };
+
+    // Responsive flex layout
+    if (sizeProps.flex) {
+      sizeStyle[`--${prefixCls}-${size}-flex`] = parseFlex(sizeProps.flex);
+    }
   });
 
+  // ==================== Normal =====================
   const classes = classNames(
     prefixCls,
     {
@@ -128,8 +136,14 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
     }
   }
 
+  // ==================== Render =====================
   return wrapCSSVar(
-    <div {...others} style={{ ...mergedStyle, ...style }} className={classes} ref={ref}>
+    <div
+      {...others}
+      style={{ ...mergedStyle, ...style, ...sizeStyle }}
+      className={classes}
+      ref={ref}
+    >
       {children}
     </div>,
   );
diff --git a/components/grid/demo/responsive-flex.md b/components/grid/demo/responsive-flex.md
new file mode 100644
index 0000000000..b272c46247
--- /dev/null
+++ b/components/grid/demo/responsive-flex.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+支持响应式下的任意 flex 比例，该功能需要浏览器支持 CSS Variables。
+
+## en-US
+
+Support flex ratio in any responsive, this feature requires browser support CSS Variables.
diff --git a/components/grid/demo/responsive-flex.tsx b/components/grid/demo/responsive-flex.tsx
new file mode 100644
index 0000000000..b310a5d382
--- /dev/null
+++ b/components/grid/demo/responsive-flex.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Col, Row } from 'antd';
+
+const App: React.FC = () => (
+  <Row>
+    {new Array(10).fill(0).map((_, index) => {
+      const key = `col-${index}`;
+      return (
+        <Col
+          key={key}
+          xs={{ flex: '100%' }}
+          sm={{ flex: '50%' }}
+          md={{ flex: '40%' }}
+          lg={{ flex: '20%' }}
+          xl={{ flex: '10%' }}
+        >
+          Col
+        </Col>
+      );
+    })}
+  </Row>
+);
+
+export default App;