feat(row): add support for space-evenly (#34606)

* feat(row): add support for space-evenly

* docs: update demo snapshot.

Co-authored-by: gp5251 <gp5251@qq.com>

components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -243,6 +243,40 @@ Array [
       col-4
     </div>
   </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align evenly
+    </span>
+  </div>,
+  <div
+    class="ant-row ant-row-space-evenly"
+  >
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+  </div>,
 ]
 `;
 

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -243,6 +243,40 @@ Array [
       col-4
     </div>
   </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align evenly
+    </span>
+  </div>,
+  <div
+    class="ant-row ant-row-space-evenly"
+  >
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+  </div>,
 ]
 `;
 

components/grid/demo/flex.md

@@ -9,11 +9,11 @@ title:
 
 布局基础。
 
-子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
+子元素根据不同的值 `start`、`center`、`end`、`space-between`、`space-around` 和 `space-evenly`，分别定义其在父节点里面的排版方式。
 
 ## en-US
 
-Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
+Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
 
 ```jsx
 import { Row, Col, Divider } from 'antd';
@@ -59,6 +59,14 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
     </Row>
+
+    <Divider orientation="left">sub-element align evenly</Divider>
+    <Row justify="space-evenly">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
   </>,
   mountNode,
 );

components/grid/index.en-US.md

@@ -91,7 +91,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | --- | --- | --- | --- | --- |
 | 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]` | number \| object \| array | 0 |  |
-| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` |  |
 | wrap | Auto wrap line | boolean | true | 4.8.0 |
 
 ### Col

components/grid/index.zh-CN.md

@@ -90,7 +90,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | --- | --- | --- | --- | --- |
 | align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` |  |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |
+| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` |  |
 | wrap | 是否自动换行 | boolean | true | 4.8.0 |
 
 ### Col

components/grid/row.tsx

@@ -11,7 +11,7 @@ import ResponsiveObserve, {
 import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
 
 const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
-const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
+const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
 
 export type Gutter = number | Partial<Record<Breakpoint, number>>;
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {

components/grid/style/index.less

@@ -43,6 +43,11 @@
   justify-content: space-around;
 }
 
+// x轴有间隔地均分
+.@{row-prefix-cls}-space-evenly {
+  justify-content: space-evenly;
+}
+
 // 顶部对齐
 .@{row-prefix-cls}-top {
   align-items: flex-start;