Row: fix align top (#20963)

ElemeFE · Jun 7, 2021 · 5ba0f1c · 5ba0f1c
1 parent e1990a7
commit 5ba0f1c
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -27,6 +27,10 @@
       justify-content: space-around;
     }
 
+    @include when(align-top) {
+      align-items: flex-start;
+    }
+
     @include when(align-middle) {
       align-items: center;
     }