🐛 Fix List item flex layout (#20897)

close #20648

components/list/Item.tsx

@@ -72,7 +72,7 @@ export default class Item extends React.Component<ListItemProps, any> {
 
   context: any;
 
-  isItemContainsTextNode() {
+  isItemContainsTextNodeAndNotSingular() {
     const { children } = this.props;
     let result;
     React.Children.forEach(children, (element: React.ReactElement<any>) => {
@@ -80,7 +80,7 @@ export default class Item extends React.Component<ListItemProps, any> {
         result = true;
       }
     });
-    return result;
+    return result && React.Children.count(children) > 1;
   }
 
   isFlexMode() {
@@ -89,7 +89,7 @@ export default class Item extends React.Component<ListItemProps, any> {
     if (itemLayout === 'vertical') {
       return !!extra;
     }
-    return !this.isItemContainsTextNode();
+    return !this.isItemContainsTextNodeAndNotSingular();
   }
 
   renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {

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

@@ -763,27 +763,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
           class="ant-list-items"
         >
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Racing car sprays burning fuel into crowd.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Japanese princess to wed commoner.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Australian walks 100km after outback crash.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Man charged over missing wedding girl.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Los Angeles battles huge wildfires.
           </li>
@@ -823,27 +823,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
           class="ant-list-items"
         >
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Racing car sprays burning fuel into crowd.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Japanese princess to wed commoner.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Australian walks 100km after outback crash.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Man charged over missing wedding girl.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Los Angeles battles huge wildfires.
           </li>

components/list/style/index.less

@@ -52,6 +52,7 @@
   &-item {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding: @list-item-padding;
 
     &-content {