From 5ba0f1c2194196a6440d5a631e7d421b97eb34e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Mon, 7 Jun 2021 19:05:03 +0800
Subject: [PATCH] Row: fix align top (#20963)

---
 examples/docs/en-US/layout.md     | 2 +-
 examples/docs/es/layout.md        | 2 +-
 examples/docs/fr-FR/layout.md     | 2 +-
 examples/docs/zh-CN/layout.md     | 2 +-
 packages/row/src/row.js           | 7 ++-----
 packages/theme-chalk/src/row.scss | 4 ++++
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md
index ac516e8bc..1a2603c7a 100644
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -337,7 +337,7 @@ The classes are:
 | gutter | grid spacing | number | — | 0 |
 | type | layout mode, you can use flex, works in modern browsers | string | — | — |
 | justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
-| align | vertical alignment of flex layout | string | top/middle/bottom | top |
+| align | vertical alignment of flex layout | string | top/middle/bottom | — |
 | tag | custom element tag | string | * | div |
 
 ### Col Attributes
diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md
index 3a7ab0b1b..8d0ff8842 100644
--- a/examples/docs/es/layout.md
+++ b/examples/docs/es/layout.md
@@ -338,7 +338,7 @@ Las clases son:
 | gutter    | espaciado de la grilla                   | number | —                                        | 0                 |
 | type      | modo del layout , puedes usar flex, funciona en navegadores modernos | string | —                                        | —                 |
 | justify   | alineación horizontal del layout flex    | string | start/end/center/space-around/space-between | start             |
-| align     | alineación vertical del layout flex      | string | top/middle/bottom                        | top               |
+| align     | alineación vertical del layout flex      | string | top/middle/bottom                        | —                |
 | tag       | tag de elemento propio                   | string | *                                        | div               |
 
 ### Atributos Col 
diff --git a/examples/docs/fr-FR/layout.md b/examples/docs/fr-FR/layout.md
index 81ee4428b..1198e7758 100644
--- a/examples/docs/fr-FR/layout.md
+++ b/examples/docs/fr-FR/layout.md
@@ -338,7 +338,7 @@ Ces classes sont:
 | gutter | Espacement de la grille. | number | — | 0 |
 | type | Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes. | string | — | — |
 | justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start |
-| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | top |
+| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | — |
 | tag | Élément de tag personnalisé. | string | * | div |
 
 ### Attributs des colonnes
diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md
index f6ef59c95..5a8530c41 100644
--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -336,7 +336,7 @@ import 'element-ui/lib/theme-chalk/display.css';
 | gutter | 栅格间隔 | number | — | 0 |
 | type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
 | justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
-| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
+| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | — |
 | tag | 自定义元素标签 | string | * | div |
 
 ### Col Attributes
diff --git a/packages/row/src/row.js b/packages/row/src/row.js
index 5611d7ce9..0fb072da5 100644
--- a/packages/row/src/row.js
+++ b/packages/row/src/row.js
@@ -14,10 +14,7 @@ export default {
       type: String,
       default: 'start'
     },
-    align: {
-      type: String,
-      default: 'top'
-    }
+    align: String
   },
 
   computed: {
@@ -38,7 +35,7 @@ export default {
       class: [
         'el-row',
         this.justify !== 'start' ? `is-justify-${this.justify}` : '',
-        this.align !== 'top' ? `is-align-${this.align}` : '',
+        this.align ? `is-align-${this.align}` : '',
         { 'el-row--flex': this.type === 'flex' }
       ],
       style: this.style
diff --git a/packages/theme-chalk/src/row.scss b/packages/theme-chalk/src/row.scss
index cec45c88b..0f435ae15 100644
--- a/packages/theme-chalk/src/row.scss
+++ b/packages/theme-chalk/src/row.scss
@@ -27,6 +27,10 @@
       justify-content: space-around;
     }
 
+    @include when(align-top) {
+      align-items: flex-start;
+    }
+
     @include when(align-middle) {
       align-items: center;
     }