chore: add flex css var

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>,
   );

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.

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;