From f68aa3cf052e8f5708b473dd572c4e8910757fd9 Mon Sep 17 00:00:00 2001
From: paul <34345790@qq.com>
Date: Wed, 23 Feb 2022 10:46:06 +0800
Subject: [PATCH] feat(components): [el-row] enhancement for supporting
 space-evenly (#6223)

Co-authored-by: gp5251 <gp5251@qq.com>
---
 docs/en-US/component/layout.md     | 14 +++++++-------
 docs/examples/layout/alignment.vue |  5 +++++
 packages/components/row/src/row.ts |  9 ++++++++-
 packages/theme-chalk/src/row.scss  |  4 +++-
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/docs/en-US/component/layout.md b/docs/en-US/component/layout.md
index 54c73dccf6..062026204d 100644
--- a/docs/en-US/component/layout.md
+++ b/docs/en-US/component/layout.md
@@ -60,7 +60,7 @@ layout/column-offset
 
 Default use the flex layout to make flexible alignment of columns.
 
-:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
+:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between, space-around or space-evenly.
 
 layout/alignment
 
@@ -103,12 +103,12 @@ The classes are:
 
 ## Row Attributes
 
-| Attribute | Description                         | Type   | Accepted Values                             | Default |
-| --------- | ----------------------------------- | ------ | ------------------------------------------- | ------- |
-| gutter    | grid spacing                        | number | —                                           | 0       |
-| 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     |
-| tag       | custom element tag                  | string | \*                                          | div     |
+| Attribute | Description                         | Type   | Accepted Values                                            | Default |
+| --------- | ----------------------------------- | ------ | ---------------------------------------------------------- | ------- |
+| gutter    | grid spacing                        | number | —                                                          | 0       |
+| justify   | horizontal alignment of flex layout | string | start/end/center/space-around/space-between/spacing-evenly | start   |
+| align     | vertical alignment of flex layout   | string | top/middle/bottom                                          | top     |
+| tag       | custom element tag                  | string | \*                                                         | div     |
 
 ## Row Slots
 
diff --git a/docs/examples/layout/alignment.vue b/docs/examples/layout/alignment.vue
index 5d671a20c4..b2d4d80e9e 100644
--- a/docs/examples/layout/alignment.vue
+++ b/docs/examples/layout/alignment.vue
@@ -24,6 +24,11 @@
     <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
     <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   </el-row>
+  <el-row class="row-bg" justify="space-evenly">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
 </template>
 
 <style>
diff --git a/packages/components/row/src/row.ts b/packages/components/row/src/row.ts
index 28ca5fdbb2..59aca250b1 100644
--- a/packages/components/row/src/row.ts
+++ b/packages/components/row/src/row.ts
@@ -14,7 +14,14 @@ export const rowProps = buildProps({
   },
   justify: {
     type: String,
-    values: ['start', 'center', 'end', 'space-around', 'space-between'],
+    values: [
+      'start',
+      'center',
+      'end',
+      'space-around',
+      'space-between',
+      'space-evenly',
+    ],
     default: 'start',
   },
   align: {
diff --git a/packages/theme-chalk/src/row.scss b/packages/theme-chalk/src/row.scss
index f0af7e402b..a61ec647ec 100644
--- a/packages/theme-chalk/src/row.scss
+++ b/packages/theme-chalk/src/row.scss
@@ -20,7 +20,9 @@
   @include when(justify-space-around) {
     justify-content: space-around;
   }
-
+  @include when(justify-space-evenly) {
+    justify-content: space-evenly;
+  }
   @include when(align-middle) {
     align-items: center;
   }