From efd3b35830e91beb47ee83119af651d814f1d03b 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: Wed, 20 Nov 2019 11:13:24 +0800
Subject: [PATCH] feat: Col support `flex` prop (#16635)

* feat: Col support `flex` prop

* update snapshot

* update doc

* row component use flex type by default

* revert grid flex layout doc

* remove float style

* remove doc old FAQ

* revert .make-row

* col style use flex and max-width

* remove useless Col style and imorove base doc for a single Col

* update snapshots

* fix flex mode pseudo

* update snapshots

* back to old flex mode demo gray background color

* set default col flex => 1 auto

* change grid about flex mode description

* update snapshots

* improve grid introduce and fix with gutter bug

* update snapshots

* remove version
---
 .../__tests__/__snapshots__/demo.test.js.snap |  12 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 components/calendar/demo/customize-header.md  |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   4 +-
 .../__snapshots__/components.test.js.snap     |   6 +-
 components/form/FormItem.tsx                  |   1 -
 .../__tests__/__snapshots__/demo.test.js.snap | 180 +++++++++---------
 .../__snapshots__/index.test.js.snap          |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  95 +++++++--
 components/grid/__tests__/index.test.js       |   2 +-
 components/grid/col.tsx                       |  48 ++---
 components/grid/demo/basic.md                 |   3 +
 components/grid/demo/flex-align.md            |  20 +-
 components/grid/demo/flex-order.md            |  16 +-
 components/grid/demo/flex-stretch.md          |  39 ++++
 components/grid/demo/flex.md                  |  26 ++-
 components/grid/demo/playground.md            |   2 +-
 components/grid/demo/responsive-more.md       |   2 +-
 components/grid/demo/responsive.md            |   2 +-
 components/grid/index.en-US.md                |  22 +--
 components/grid/index.zh-CN.md                |  20 +-
 components/grid/row.tsx                       |  26 +--
 components/grid/style/index.less              |  26 +--
 components/grid/style/mixin.less              |  52 +----
 .../__tests__/__snapshots__/demo.test.js.snap |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +-
 components/page-header/demo/actions.md        |   2 +-
 components/page-header/demo/content.md        |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  28 +--
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 site/theme/static/markdown.less               |  11 +-
 32 files changed, 356 insertions(+), 317 deletions(-)
 create mode 100644 components/grid/demo/flex-stretch.md

diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index b0d2896b5d..83b3cb367b 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -167,7 +167,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   style="margin:0 auto"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -215,7 +215,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -291,7 +291,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -398,7 +398,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -475,7 +475,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -611,7 +611,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
index c960c10d01..d4c9611ca0 100644
--- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -2128,7 +2128,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
         Custom header 
       </div>
       <div
-        class="ant-row-flex"
+        class="ant-row"
         style="margin-left:-4px;margin-right:-4px;flex-wrap:nowrap"
       >
         <div
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
index 6241145161..ebc5fe8a1e 100644
--- a/components/calendar/demo/customize-header.md
+++ b/components/calendar/demo/customize-header.md
@@ -60,7 +60,7 @@ ReactDOM.render(
         return (
           <div style={{ padding: 10 }}>
             <div style={{ marginBottom: '10px' }}>Custom header </div>
-            <Row type="flex" style={{ flexWrap: 'nowrap' }} gutter={8}>
+            <Row style={{ flexWrap: 'nowrap' }} gutter={8}>
               <Col style={{ flex: 'none' }}>
                 <Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
                   <Button value="month">Month</Button>
diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap
index c3582ba63c..a67fdf23f7 100644
--- a/components/comment/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap
@@ -152,7 +152,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
         >
           <div>
             <div
-              class="ant-row-flex ant-form-item"
+              class="ant-row ant-form-item"
             >
               <div
                 class="ant-col ant-form-item-control"
@@ -168,7 +168,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
               </div>
             </div>
             <div
-              class="ant-row-flex ant-form-item"
+              class="ant-row ant-form-item"
             >
               <div
                 class="ant-col ant-form-item-control"
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 3771db3d4f..c6fb127c47 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -7028,7 +7028,7 @@ exports[`ConfigProvider components Form configProvider 1`] = `
   class="config-form config-form-horizontal"
 >
   <div
-    class="config-row-flex config-form-item config-form-item-has-error"
+    class="config-row config-form-item config-form-item-has-error"
   >
     <div
       class="config-col config-form-item-control"
@@ -7052,7 +7052,7 @@ exports[`ConfigProvider components Form normal 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-error"
+    class="ant-row ant-form-item ant-form-item-has-error"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -7076,7 +7076,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
   class="prefix-Form prefix-Form-horizontal"
 >
   <div
-    class="ant-row-flex prefix-Form-item prefix-Form-item-has-error"
+    class="ant-row prefix-Form-item prefix-Form-item-has-error"
   >
     <div
       class="ant-col prefix-Form-item-control"
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 5bc452bef8..be713b7b2c 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -196,7 +196,6 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
 
         return (
           <Row
-            type="flex"
             className={classNames(itemClassName)}
             style={style}
             key="row"
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index de49d5e2ea..9169915b12 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -15,7 +15,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row-flex ant-form-item"
+          class="ant-row ant-form-item"
         >
           <div
             class="ant-col ant-form-item-label"
@@ -50,7 +50,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row-flex ant-form-item"
+          class="ant-row ant-form-item"
         >
           <div
             class="ant-col ant-form-item-label"
@@ -85,7 +85,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row-flex ant-form-item"
+          class="ant-row ant-form-item"
         >
           <div
             class="ant-col ant-form-item-label"
@@ -120,7 +120,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row-flex ant-form-item"
+          class="ant-row ant-form-item"
         >
           <div
             class="ant-col ant-form-item-label"
@@ -155,7 +155,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row-flex ant-form-item"
+          class="ant-row ant-form-item"
         >
           <div
             class="ant-col ant-form-item-label"
@@ -190,7 +190,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row-flex ant-form-item"
+          class="ant-row ant-form-item"
         >
           <div
             class="ant-col ant-form-item-label"
@@ -287,7 +287,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
   id="basic"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -316,7 +316,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -378,7 +378,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
     valuepropname="checked"
   >
     <div
@@ -411,7 +411,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@@ -439,7 +439,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
   id="control-hooks"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -468,7 +468,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -548,7 +548,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@@ -592,7 +592,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
   id="control-ref"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -621,7 +621,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -701,7 +701,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@@ -745,7 +745,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
   id="customized_form_controls"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label"
@@ -833,7 +833,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -862,7 +862,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
 >
   <div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
@@ -908,7 +908,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
@@ -936,7 +936,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
   id="dynamic_rule"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
@@ -966,7 +966,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
@@ -996,7 +996,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control"
@@ -1026,7 +1026,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control"
@@ -1055,7 +1055,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
     id="basicForm"
   >
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-col-8 ant-form-item-label"
@@ -1084,7 +1084,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-col-8 ant-form-item-label"
@@ -1132,7 +1132,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@@ -1184,7 +1184,7 @@ exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
     id="global_state"
   >
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1234,7 +1234,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
   id="horizontal_login"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -1282,7 +1282,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -1330,7 +1330,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -1358,7 +1358,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
     class="ant-form ant-form-horizontal"
   >
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-col-4 ant-form-item-label"
@@ -1442,7 +1442,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-col-4 ant-form-item-label"
@@ -1470,7 +1470,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-col-4 ant-form-item-label"
@@ -1498,7 +1498,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control"
@@ -1527,7 +1527,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
   id="nest-messages"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -1556,7 +1556,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -1585,7 +1585,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -1686,7 +1686,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -1715,7 +1715,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-8 ant-form-item-label"
@@ -1742,7 +1742,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@@ -1770,7 +1770,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
   id="normal_login"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -1818,7 +1818,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -1866,7 +1866,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -1904,7 +1904,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -1938,7 +1938,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
   id="register"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -1967,7 +1967,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2029,7 +2029,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2091,7 +2091,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2145,7 +2145,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2228,7 +2228,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2328,7 +2328,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2381,7 +2381,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2437,7 +2437,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
     valuepropname="checked"
   >
     <div
@@ -2474,7 +2474,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
@@ -2502,7 +2502,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
   id="time_related_controls"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2558,7 +2558,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2615,7 +2615,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2671,7 +2671,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2743,7 +2743,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2816,7 +2816,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@@ -2877,7 +2877,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
@@ -2905,7 +2905,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
   id="validate_other"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -2932,7 +2932,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3012,7 +3012,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3072,7 +3072,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3180,7 +3180,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
     valuepropname="checked"
   >
     <div
@@ -3215,7 +3215,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3327,7 +3327,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3412,7 +3412,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3497,7 +3497,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3648,7 +3648,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -3977,7 +3977,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
     valuepropname="fileList"
   >
     <div
@@ -4016,7 +4016,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -4048,7 +4048,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control"
@@ -4075,7 +4075,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-error"
+    class="ant-row ant-form-item ant-form-item-has-error"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4104,7 +4104,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-warning"
+    class="ant-row ant-form-item ant-form-item-has-warning"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4133,7 +4133,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4165,7 +4165,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4197,7 +4197,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4229,7 +4229,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4261,7 +4261,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4319,7 +4319,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4383,7 +4383,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4464,7 +4464,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4546,7 +4546,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
     style="margin-bottom:0"
   >
     <div
@@ -4566,7 +4566,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-row-flex ant-form-item ant-form-item-has-error"
+          class="ant-row ant-form-item ant-form-item-has-error"
           style="display:inline-block;width:calc(50% - 12px)"
         >
           <div
@@ -4616,7 +4616,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           -
         </span>
         <div
-          class="ant-row-flex ant-form-item"
+          class="ant-row ant-form-item"
           style="display:inline-block;width:calc(50% - 12px)"
         >
           <div
@@ -4664,7 +4664,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4774,7 +4774,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-7 ant-form-item-label"
diff --git a/components/form/__tests__/__snapshots__/index.test.js.snap b/components/form/__tests__/__snapshots__/index.test.js.snap
index 600c148e2c..37be996c12 100644
--- a/components/form/__tests__/__snapshots__/index.test.js.snap
+++ b/components/form/__tests__/__snapshots__/index.test.js.snap
@@ -7,7 +7,7 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
   <div
     aria-hidden="true"
     cccc="bbbb"
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
     data-text="123"
   >
     <div
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index df518e4a16..53e2ea0c32 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -2,6 +2,15 @@
 
 exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
 <div>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col"
+    >
+      col
+    </div>
+  </div>
   <div
     class="ant-row"
   >
@@ -68,7 +77,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     sub-element align left
   </p>
   <div
-    class="ant-row-flex ant-row-flex-start"
+    class="ant-row ant-row-start"
   >
     <div
       class="ant-col ant-col-4"
@@ -95,7 +104,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     sub-element align center
   </p>
   <div
-    class="ant-row-flex ant-row-flex-center"
+    class="ant-row ant-row-center"
   >
     <div
       class="ant-col ant-col-4"
@@ -122,7 +131,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     sub-element align right
   </p>
   <div
-    class="ant-row-flex ant-row-flex-end"
+    class="ant-row ant-row-end"
   >
     <div
       class="ant-col ant-col-4"
@@ -149,7 +158,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     sub-element monospaced arrangement
   </p>
   <div
-    class="ant-row-flex ant-row-flex-space-between"
+    class="ant-row ant-row-space-between"
   >
     <div
       class="ant-col ant-col-4"
@@ -176,7 +185,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     sub-element align full
   </p>
   <div
-    class="ant-row-flex ant-row-flex-space-around"
+    class="ant-row ant-row-space-around"
   >
     <div
       class="ant-col ant-col-4"
@@ -208,7 +217,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     Align Top
   </p>
   <div
-    class="ant-row-flex ant-row-flex-center ant-row-flex-top"
+    class="ant-row ant-row-center ant-row-top"
   >
     <div
       class="ant-col ant-col-4"
@@ -251,7 +260,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     Align Center
   </p>
   <div
-    class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle"
+    class="ant-row ant-row-space-around ant-row-middle"
   >
     <div
       class="ant-col ant-col-4"
@@ -294,7 +303,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     Align Bottom
   </p>
   <div
-    class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom"
+    class="ant-row ant-row-space-between ant-row-bottom"
   >
     <div
       class="ant-col ant-col-4"
@@ -339,7 +348,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
 exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
 <div>
   <div
-    class="ant-row-flex"
+    class="ant-row"
   >
     <div
       class="ant-col ant-col-6 ant-col-order-4"
@@ -365,6 +374,68 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
+<div>
+  <p>
+    Percentage columns
+  </p>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col"
+      style="flex:2 2 auto"
+    >
+      2 / 5
+    </div>
+    <div
+      class="ant-col"
+      style="flex:3 3 auto"
+    >
+      3 / 5
+    </div>
+  </div>
+  <p>
+    Fill rest
+  </p>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col"
+      style="flex:0 0 100px"
+    >
+      100px
+    </div>
+    <div
+      class="ant-col"
+      style="flex:auto"
+    >
+      Fill Rest
+    </div>
+  </div>
+  <p>
+    Raw flex style
+  </p>
+  <div
+    class="ant-row"
+  >
+    <div
+      class="ant-col"
+      style="flex:1 1 200px"
+    >
+      1 1 200px
+    </div>
+    <div
+      class="ant-col"
+      style="flex:0 1 300px"
+    >
+      0 1 300px
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
 <div
   class="gutter-example"
@@ -416,7 +487,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
   </div>
   <div
     class="ant-row"
-    style="margin-top:-10px;margin-bottom:-10px"
+    style="margin-top:-10px;margin-bottom:10px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
@@ -806,7 +877,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
   </div>
   <div
     class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
+    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
   >
     <div
       class="ant-col ant-col-6"
@@ -843,7 +914,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
   </div>
   <div
     class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
+    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
   >
     <div
       class="ant-col ant-col-6"
diff --git a/components/grid/__tests__/index.test.js b/components/grid/__tests__/index.test.js
index 8945088e00..79a3c3e7f9 100644
--- a/components/grid/__tests__/index.test.js
+++ b/components/grid/__tests__/index.test.js
@@ -112,7 +112,7 @@ describe('Grid', () => {
       marginLeft: -8,
       marginRight: -8,
       marginTop: -10,
-      marginBottom: -10,
+      marginBottom: 10,
     });
   });
 });
diff --git a/components/grid/col.tsx b/components/grid/col.tsx
index 32d28a324e..5da17a8d48 100644
--- a/components/grid/col.tsx
+++ b/components/grid/col.tsx
@@ -1,14 +1,13 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RowContext from './RowContext';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
-const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
-
 // https://github.com/ant-design/ant-design/issues/14324
 type ColSpanType = number | string;
 
+type FlexType = number | 'none' | 'auto' | string;
+
 export interface ColSize {
   span?: ColSpanType;
   order?: ColSpanType;
@@ -30,25 +29,22 @@ export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
   xl?: ColSpanType | ColSize;
   xxl?: ColSpanType | ColSize;
   prefixCls?: string;
+  flex?: FlexType;
+}
+
+function parseFlex(flex: FlexType): string {
+  if (typeof flex === 'number') {
+    return `${flex} ${flex} auto`;
+  }
+
+  if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
+    return `0 0 ${flex}`;
+  }
+
+  return flex;
 }
 
 export default class Col extends React.Component<ColProps, {}> {
-  static propTypes = {
-    span: PropTypes.number,
-    order: PropTypes.number,
-    offset: PropTypes.number,
-    push: PropTypes.number,
-    pull: PropTypes.number,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    xs: objectOrNumber,
-    sm: objectOrNumber,
-    md: objectOrNumber,
-    lg: objectOrNumber,
-    xl: objectOrNumber,
-    xxl: objectOrNumber,
-  };
-
   renderCol = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { props } = this;
     const {
@@ -60,6 +56,8 @@ export default class Col extends React.Component<ColProps, {}> {
       pull,
       className,
       children,
+      flex,
+      style,
       ...others
     } = props;
     const prefixCls = getPrefixCls('col', customizePrefixCls);
@@ -101,10 +99,9 @@ export default class Col extends React.Component<ColProps, {}> {
     return (
       <RowContext.Consumer>
         {({ gutter }) => {
-          let { style } = others;
-
+          let mergedStyle: React.CSSProperties = { ...style };
           if (gutter) {
-            style = {
+            mergedStyle = {
               ...(gutter[0]! > 0
                 ? {
                     paddingLeft: gutter[0]! / 2,
@@ -117,12 +114,15 @@ export default class Col extends React.Component<ColProps, {}> {
                     paddingBottom: gutter[1]! / 2,
                   }
                 : {}),
-              ...style,
+              ...mergedStyle,
             };
           }
+          if (flex) {
+            mergedStyle.flex = parseFlex(flex);
+          }
 
           return (
-            <div {...others} style={style} className={classes}>
+            <div {...others} style={mergedStyle} className={classes}>
               {children}
             </div>
           );
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
index d031035b66..2d727b5773 100644
--- a/components/grid/demo/basic.md
+++ b/components/grid/demo/basic.md
@@ -22,6 +22,9 @@ import { Row, Col } from 'antd';
 
 ReactDOM.render(
   <div>
+    <Row>
+      <Col>col</Col>
+    </Row>
     <Row>
       <Col span={12}>col-12</Col>
       <Col span={12}>col-12</Col>
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
index 21914611ec..1cb1457b7a 100644
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@@ -1,17 +1,17 @@
 ---
 order: 5
 title:
-  zh-CN: Flex 对齐
-  en-US: Flex Alignment
+  zh-CN: 对齐
+  en-US: Alignment
 ---
 
 ## zh-CN
 
-Flex 子元素垂直对齐。
+子元素垂直对齐。
 
 ## en-US
 
-Flex child elements vertically aligned.
+Child elements vertically aligned.
 
 ```jsx
 import { Row, Col } from 'antd';
@@ -21,7 +21,7 @@ const DemoBox = props => <p className={`height-${props.value}`}>{props.children}
 ReactDOM.render(
   <div>
     <p>Align Top</p>
-    <Row type="flex" justify="center" align="top">
+    <Row justify="center" align="top">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
       </Col>
@@ -37,7 +37,7 @@ ReactDOM.render(
     </Row>
 
     <p>Align Center</p>
-    <Row type="flex" justify="space-around" align="middle">
+    <Row justify="space-around" align="middle">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
       </Col>
@@ -53,7 +53,7 @@ ReactDOM.render(
     </Row>
 
     <p>Align Bottom</p>
-    <Row type="flex" justify="space-between" align="bottom">
+    <Row justify="space-between" align="bottom">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
       </Col>
@@ -71,3 +71,9 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+#components-grid-demo-flex-align [class~='ant-row'] {
+  background: #f5f5f5;
+}
+```
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
index 191b51278e..e6d9178809 100644
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@@ -1,24 +1,24 @@
 ---
 order: 6
 title:
-  zh-CN: Flex 排序
-  en-US: Flex Order
+  zh-CN: 排序
+  en-US: Order
 ---
 
 ## zh-CN
 
-通过 Flex 布局的 Order 来改变元素的排序。
+通过 Order 来改变元素的排序。
 
 ## en-US
 
-To change the element sort by Flex layout order.
+To change the element sort by order.
 
 ```jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
   <div>
-    <Row type="flex">
+    <Row>
       <Col span={6} order={4}>
         1 col-order-4
       </Col>
@@ -36,3 +36,9 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+#components-grid-demo-flex-order [class~='ant-row'] {
+  background: #f5f5f5;
+}
+```
diff --git a/components/grid/demo/flex-stretch.md b/components/grid/demo/flex-stretch.md
new file mode 100644
index 0000000000..824b019a59
--- /dev/null
+++ b/components/grid/demo/flex-stretch.md
@@ -0,0 +1,39 @@
+---
+order: 7
+title:
+  zh-CN: Flex 填充
+  en-US: Flex Stretch
+---
+
+## zh-CN
+
+Col 提供 `flex` 属性以支持填充。
+
+## en-US
+
+Col provides `flex` prop to support fill rest.
+
+```jsx
+import { Row, Col } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <p>Percentage columns</p>
+    <Row>
+      <Col flex={2}>2 / 5</Col>
+      <Col flex={3}>3 / 5</Col>
+    </Row>
+    <p>Fill rest</p>
+    <Row>
+      <Col flex="100px">100px</Col>
+      <Col flex="auto">Fill Rest</Col>
+    </Row>
+    <p>Raw flex style</p>
+    <Row>
+      <Col flex="1 1 200px">1 1 200px</Col>
+      <Col flex="0 1 300px">0 1 300px</Col>
+    </Row>
+  </div>,
+  mountNode,
+);
+```
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index c132166c83..bbaea4ec15 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -1,19 +1,19 @@
 ---
 order: 4
 title:
-  zh-CN: Flex 布局
-  en-US: Flex Layout
+  zh-CN: 排版
+  en-US: Typesetting
 ---
 
 ## zh-CN
 
-Flex 布局基础。
+布局基础。
 
-使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
+子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
 
 ## en-US
 
-Use `row-flex` define `flex` layout, its child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node layout mode.
+Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
 
 ```jsx
 import { Row, Col } from 'antd';
@@ -21,7 +21,7 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
   <div>
     <p>sub-element align left</p>
-    <Row type="flex" justify="start">
+    <Row justify="start">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -29,7 +29,7 @@ ReactDOM.render(
     </Row>
 
     <p>sub-element align center</p>
-    <Row type="flex" justify="center">
+    <Row justify="center">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -37,7 +37,7 @@ ReactDOM.render(
     </Row>
 
     <p>sub-element align right</p>
-    <Row type="flex" justify="end">
+    <Row justify="end">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -45,7 +45,7 @@ ReactDOM.render(
     </Row>
 
     <p>sub-element monospaced arrangement</p>
-    <Row type="flex" justify="space-between">
+    <Row justify="space-between">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -53,7 +53,7 @@ ReactDOM.render(
     </Row>
 
     <p>sub-element align full</p>
-    <Row type="flex" justify="space-around">
+    <Row justify="space-around">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -63,3 +63,9 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+#components-grid-demo-flex [class~='ant-row'] {
+  background: #f5f5f5;
+}
+```
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 940be3f45b..c8f5c3ffa2 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 10
 title:
   zh-CN: 栅格配置器
   en-US: Playground
diff --git a/components/grid/demo/responsive-more.md b/components/grid/demo/responsive-more.md
index 9d2769fe66..586e6b407f 100644
--- a/components/grid/demo/responsive-more.md
+++ b/components/grid/demo/responsive-more.md
@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 title:
   zh-CN: 其他属性的响应式
   en-US: More responsive
diff --git a/components/grid/demo/responsive.md b/components/grid/demo/responsive.md
index 15f988297a..f4c4c69d35 100644
--- a/components/grid/demo/responsive.md
+++ b/components/grid/demo/responsive.md
@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 title:
   zh-CN: 响应式布局
   en-US: Responsive
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index cf36039ac8..35818223c4 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -73,11 +73,9 @@ Following is a brief look at how it works:
 - The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `<Col span={8} />`.
 - If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.
 
-## Flex layout
+Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`.
 
-Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`.
-
-Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
+Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
 
 ## API
 
@@ -90,17 +88,17 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |  |
-| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `3.24.0`) | number/object/array | 0 |  |
-| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |  |
-| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string |  |  |
+| align | vertical alignment | `top` `middle` `bottom` | `top` |  |
+| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `3.24.0`) | number/object/array | 0 |  |  |
+| justify | horizontal arrangement | `start` `end` `center` `space-around` `space-between` | `start` |  |
 
 ### Col
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| flex | flex layout style | string \| number | - |  |
 | offset | the number of cells to offset Col from the left | number | 0 |  |
-| order | raster order, used in `flex` layout mode | number | 0 |  |
+| order | raster order | number | 0 |  |
 | pull | the number of cells that raster is moved to the left | number | 0 |  |
 | push | the number of cells that raster is moved to the right | number | 0 |  |
 | span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |  |
@@ -112,9 +110,3 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |  |
 
 The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).
-
-## FAQ
-
-### How to support IE9 when using responsive?
-
-You can use [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) to handle this.
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index 77f67dafd5..9a4c2da6e4 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -72,11 +72,9 @@ title: Grid
 - 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建
 - 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列
 
-## Flex 布局
+我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
 
-我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
-
-Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
+布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
 
 ## API
 
@@ -89,17 +87,17 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |  |
+| align | 垂直对齐方式 | `top` `middle` `bottom` | `top` |  |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`3.24.0 后支持`）。 | number/object/array | 0 |  |
-| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |  |
-| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string |  |  |
+| justify | 水平排列方式 | `start` `end` `center` `space-around` `space-between` | `start` |  |
 
 ### Col
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| flex | flex 布局属性 | string \| number | - |  |
 | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |  |
-| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |  |
+| order | 栅格顺序 | number | 0 |  |
 | pull | 栅格向左移动格数 | number | 0 |  |
 | push | 栅格向右移动格数 | number | 0 |  |
 | span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |  |
@@ -111,9 +109,3 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |  |
 
 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
-
-## FAQ
-
-### IE9 响应式不工作怎么办？
-
-可以引入 [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) 添加支持。
diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index 2d32a3d9f6..51d889fee6 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import * as PropTypes from 'prop-types';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import RowContext from './RowContext';
 import { tuple } from '../_util/type';
@@ -16,9 +15,8 @@ const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-betwee
 export type Gutter = number | Partial<Record<Breakpoint, number>>;
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   gutter?: Gutter | [Gutter, Gutter];
-  type?: 'flex';
-  align?: (typeof RowAligns)[number];
-  justify?: (typeof RowJustify)[number];
+  align?: typeof RowAligns[number];
+  justify?: typeof RowJustify[number];
   prefixCls?: string;
 }
 
@@ -31,16 +29,6 @@ export default class Row extends React.Component<RowProps, RowState> {
     gutter: 0,
   };
 
-  static propTypes = {
-    type: PropTypes.oneOf<'flex'>(['flex']),
-    align: PropTypes.oneOf(RowAligns),
-    justify: PropTypes.oneOf(RowJustify),
-    className: PropTypes.string,
-    children: PropTypes.node,
-    gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    prefixCls: PropTypes.string,
-  };
-
   state: RowState = {
     screens: {},
   };
@@ -87,7 +75,6 @@ export default class Row extends React.Component<RowProps, RowState> {
   renderRow = ({ getPrefixCls }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
-      type,
       justify,
       align,
       className,
@@ -98,11 +85,10 @@ export default class Row extends React.Component<RowProps, RowState> {
     const prefixCls = getPrefixCls('row', customizePrefixCls);
     const gutter = this.getGutter();
     const classes = classNames(
+      prefixCls,
       {
-        [prefixCls]: !type,
-        [`${prefixCls}-${type}`]: type,
-        [`${prefixCls}-${type}-${justify}`]: type && justify,
-        [`${prefixCls}-${type}-${align}`]: type && align,
+        [`${prefixCls}-${justify}`]: justify,
+        [`${prefixCls}-${align}`]: align,
       },
       className,
     );
@@ -116,7 +102,7 @@ export default class Row extends React.Component<RowProps, RowState> {
       ...(gutter[1]! > 0
         ? {
             marginTop: gutter[1]! / -2,
-            marginBottom: gutter[1]! / -2,
+            marginBottom: gutter[1]! / 2,
           }
         : {}),
       ...style,
diff --git a/components/grid/style/index.less b/components/grid/style/index.less
index cf05ef1061..6791423f60 100644
--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@@ -4,13 +4,6 @@
 
 // Grid system
 .@{ant-prefix}-row {
-  .make-row();
-
-  display: block;
-  box-sizing: border-box;
-}
-
-.@{ant-prefix}-row-flex {
   display: flex;
   flex-flow: row wrap;
 
@@ -21,52 +14,53 @@
 }
 
 // x轴原点
-.@{ant-prefix}-row-flex-start {
+.@{ant-prefix}-row-start {
   justify-content: flex-start;
 }
 
 // x轴居中
-.@{ant-prefix}-row-flex-center {
+.@{ant-prefix}-row-center {
   justify-content: center;
 }
 
 // x轴反方向
-.@{ant-prefix}-row-flex-end {
+.@{ant-prefix}-row-end {
   justify-content: flex-end;
 }
 
 // x轴平分
-.@{ant-prefix}-row-flex-space-between {
+.@{ant-prefix}-row-space-between {
   justify-content: space-between;
 }
 
 // x轴有间隔地平分
-.@{ant-prefix}-row-flex-space-around {
+.@{ant-prefix}-row-space-around {
   justify-content: space-around;
 }
 
 // 顶部对齐
-.@{ant-prefix}-row-flex-top {
+.@{ant-prefix}-row-top {
   align-items: flex-start;
 }
 
 // 居中对齐
-.@{ant-prefix}-row-flex-middle {
+.@{ant-prefix}-row-middle {
   align-items: center;
 }
 
 // 底部对齐
-.@{ant-prefix}-row-flex-bottom {
+.@{ant-prefix}-row-bottom {
   align-items: flex-end;
 }
 
 .@{ant-prefix}-col {
   position: relative;
+  flex: 1 auto;
+  max-width: 100%;
   // Prevent columns from collapsing when empty
   min-height: 1px;
 }
 
-.make-grid-columns();
 .make-grid();
 
 // Extra small grid
diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less
index cf3f681699..4d9de47060 100644
--- a/components/grid/style/mixin.less
+++ b/components/grid/style/mixin.less
@@ -2,59 +2,12 @@
 
 // mixins for grid system
 // ------------------------
-.make-row(@gutter: @grid-gutter-width) {
-  position: relative;
-  height: auto;
-  margin-right: (@gutter / -2);
-  margin-left: (@gutter / -2);
-  .clearfix;
-}
-
-.make-grid-columns() {
-  .col(@index) {
-    @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @grid-columns) {
-    @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
-  }
-  .col(@index, @list) when (@index > @grid-columns) {
-    @{list} {
-      position: relative;
-      padding-right: (@grid-gutter-width / 2);
-      padding-left: (@grid-gutter-width / 2);
-    }
-  }
-  .col(1);
-}
-
-.float-grid-columns(@class) {
-  .col(@index) {
-    // initial
-    @item: ~'.@{ant-prefix}-col@{class}-@{index}';
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @grid-columns) {
-    // general
-    @item: ~'.@{ant-prefix}-col@{class}-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
-  }
-  .col(@index, @list) when (@index > @grid-columns) {
-    // terminal
-    @{list} {
-      flex: 0 0 auto;
-      float: left;
-    }
-  }
-  .col(1); // kickstart it
-}
 
 .loop-grid-columns(@index, @class) when (@index > 0) {
   .@{ant-prefix}-col@{class}-@{index} {
     display: block;
-    box-sizing: border-box;
-    width: percentage((@index / @grid-columns));
+    flex: 0 0 percentage((@index / @grid-columns));
+    max-width: percentage((@index / @grid-columns));
   }
   .@{ant-prefix}-col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
@@ -96,6 +49,5 @@
 }
 
 .make-grid(@class: ~'') {
-  .float-grid-columns(@class);
   .loop-grid-columns(@grid-columns, @class);
 }
diff --git a/components/mention/__tests__/__snapshots__/demo.test.js.snap b/components/mention/__tests__/__snapshots__/demo.test.js.snap
index e258018d83..f197c9a6d4 100644
--- a/components/mention/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/mention/__tests__/__snapshots__/demo.test.js.snap
@@ -254,7 +254,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -336,7 +336,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
index 0da3924cb6..e937fed209 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
@@ -29,7 +29,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -51,7 +51,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
@@ -83,7 +83,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 738d272b92..ec19f7c1b6 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -273,7 +273,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
       class="ant-page-header-content"
     >
       <div
-        class="ant-row-flex"
+        class="ant-row"
       >
         <div
           class="ant-statistic"
@@ -634,7 +634,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
     class="ant-page-header-content"
   >
     <div
-      class="ant-row-flex content"
+      class="ant-row content"
     >
       <div
         class="main"
@@ -654,7 +654,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
             Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
           </div>
           <div
-            class="ant-row-flex contentLink"
+            class="ant-row contentLink"
           >
             <a
               style="margin-right:16px;display:flex;align-items:center"
diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md
index 1ba8908e48..3618077655 100644
--- a/components/page-header/demo/actions.md
+++ b/components/page-header/demo/actions.md
@@ -59,7 +59,7 @@ ReactDOM.render(
         </Button>,
       ]}
     >
-      <Row type="flex">
+      <Row>
         <Statistic title="Status" value="Pending" />
         <Statistic
           title="Price"
diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md
index a66f3865a7..e982b2e792 100644
--- a/components/page-header/demo/content.md
+++ b/components/page-header/demo/content.md
@@ -104,7 +104,7 @@ const content = (
       easier for designers to have a clear psychological expectation of color when adjusting colors,
       as well as facilitate communication in teams.
     </Paragraph>
-    <Row className="contentLink" type="flex">
+    <Row className="contentLink">
       <IconLink
         src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
         text="Quick Start"
@@ -123,7 +123,7 @@ const content = (
 
 const Content = ({ children, extraContent }) => {
   return (
-    <Row className="content" type="flex">
+    <Row className="content">
       <div className="main" style={{ flex: 1 }}>
         {children}
       </div>
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 71f8705802..70ead281a0 100755
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -1663,7 +1663,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
     style="margin-bottom:16px"
   >
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1695,7 +1695,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1727,7 +1727,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1759,7 +1759,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1792,7 +1792,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1825,7 +1825,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1858,7 +1858,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1891,7 +1891,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1923,7 +1923,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1956,7 +1956,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -1988,7 +1988,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -2072,7 +2072,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -2155,7 +2155,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -2219,7 +2219,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-row-flex ant-form-item"
+      class="ant-row ant-form-item"
     >
       <div
         class="ant-col ant-form-item-label"
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index eef59c4e30..a66233e34a 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -1478,7 +1478,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row-flex ant-form-item"
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index 7f098d6840..798d99d88f 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -319,14 +319,8 @@
       transparent 95.83333333%
     );
   }
-  .ant-row-flex,
-  .code-box-demo .ant-row-flex {
-    background: #f5f5f5;
-  }
   .ant-row > div,
-  .code-box-demo .ant-row > div,
-  .ant-row-flex > div,
-  .code-box-demo .ant-row-flex > div {
+  .code-box-demo .ant-row > div {
     min-height: 30px;
     margin-top: 8px;
     margin-bottom: 8px;
@@ -335,8 +329,7 @@
     text-align: center;
     border-radius: 0;
   }
-  .code-box-demo .ant-row > div:not(.gutter-row),
-  .code-box-demo .ant-row-flex > div:not(.gutter-row) {
+  .code-box-demo .ant-row > div:not(.gutter-row) {
     padding: 16px 0;
     background: #00a0e9;
     &:nth-child(2n + 1) {