From 5f55b3c3b6742713cd1bf9d8fd5752c10aef680b Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Mon, 29 Mar 2021 18:07:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wrapper/layout/flex/flex.horizontal.js    |  6 ++
 src/core/wrapper/layout/flex/flex.vertical.js |  6 ++
 src/less/core/wrapper/flex.horizontal.less    | 78 ++++++++++++-------
 src/less/core/wrapper/flex.vertical.less      | 78 ++++++++++++-------
 .../core/wrapper/flex.wrapper.horizontal.less | 30 +++----
 .../core/wrapper/flex.wrapper.vertical.less   | 21 ++---
 6 files changed, 143 insertions(+), 76 deletions(-)

diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index c0b2c5617..a618e3a59 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -25,6 +25,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
+        if (o.scrollable === true || o.scrollx === true) {
+            this.element.addClass("f-scroll-x");
+        }
+        if (o.scrollable === true || o.scrolly === true) {
+            this.element.addClass("f-scroll-y");
+        }
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
index b53915aa8..e78b4a103 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -24,6 +24,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
         this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
+        if (o.scrollable === true || o.scrollx === true) {
+            this.element.addClass("f-scroll-x");
+        }
+        if (o.scrollable === true || o.scrolly === true) {
+            this.element.addClass("f-scroll-y");
+        }
         this.populate(this.options.items);
     },
 
diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less
index 54a96397c..5ad67aee9 100644
--- a/src/less/core/wrapper/flex.horizontal.less
+++ b/src/less/core/wrapper/flex.horizontal.less
@@ -63,18 +63,31 @@
   flex-wrap: nowrap;
 
   &.v-middle {
-    ///* 09版 */
-    //-webkit-box-align: center;
-    ///* 12版 */
-    //-webkit-align-items: center;
-    //-moz-align-items: center;
-    //-ms-align-items: center;
-    //-ms-flex-align: center;
-    //-o-align-items: center;
-    //align-items: center;
-    > .c-e {
-      margin-top: auto !important;
-      margin-bottom: auto !important;
+    /* 09版 */
+    -webkit-box-align: center;
+    /* 12版 */
+    -webkit-align-items: center;
+    -moz-align-items: center;
+    -ms-align-items: center;
+    -ms-flex-align: center;
+    -o-align-items: center;
+    align-items: center;
+
+    &.f-scroll-x {
+      /* 09版 */
+      -webkit-box-align: flex-start;
+      /* 12版 */
+      -webkit-align-items: flex-start;
+      -moz-align-items: flex-start;
+      -ms-align-items: flex-start;
+      -ms-flex-align: start;
+      -o-align-items: flex-start;
+      align-items: flex-start;
+
+      > .c-e {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+      }
     }
   }
 
@@ -103,21 +116,34 @@
   }
 
   &.h-center {
-    ///* 09版 */
-    //-webkit-box-pack: center;
-    ///* 12版 */
-    //-webkit-justify-content: center;
-    //-moz-justify-content: center;
-    //-ms-justify-content: center;
-    //-ms-flex-pack: center;
-    //-o-justify-content: center;
-    //justify-content: center;
-    > .f-c {
-      margin-left: auto !important;
-    }
+    /* 09版 */
+    -webkit-box-pack: center;
+    /* 12版 */
+    -webkit-justify-content: center;
+    -moz-justify-content: center;
+    -ms-justify-content: center;
+    -ms-flex-pack: center;
+    -o-justify-content: center;
+    justify-content: center;
+
+    &.f-scroll-x {
+      /* 09版 */
+      -webkit-box-pack: flex-start;
+      /* 12版 */
+      -webkit-justify-content: flex-start;
+      -moz-justify-content: flex-start;
+      -ms-justify-content: flex-start;
+      -ms-flex-pack: start;
+      -o-justify-content: flex-start;
+      justify-content: flex-start;
+
+      > .f-c {
+        margin-left: auto !important;
+      }
 
-    > .l-c {
-      margin-right: auto !important;
+      > .l-c {
+        margin-right: auto !important;
+      }
     }
   }
 
diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less
index e9446f931..1772deb9f 100644
--- a/src/less/core/wrapper/flex.vertical.less
+++ b/src/less/core/wrapper/flex.vertical.less
@@ -62,18 +62,31 @@
   flex-wrap: nowrap;
 
   &.h-center {
-    ///* 09版 */
-    //-webkit-box-align: center;
-    ///* 12版 */
-    //-webkit-align-items: center;
-    //-moz-align-items: center;
-    //-ms-align-items: center;
-    //-ms-flex-align: center;
-    //-o-align-items: center;
-    //align-items: center;
-    > .c-e {
-      margin-left: auto !important;
-      margin-right: auto !important;
+    /* 09版 */
+    -webkit-box-align: center;
+    /* 12版 */
+    -webkit-align-items: center;
+    -moz-align-items: center;
+    -ms-align-items: center;
+    -ms-flex-align: center;
+    -o-align-items: center;
+    align-items: center;
+
+    &.f-scroll-x {
+      /* 09版 */
+      -webkit-box-align: flex-start;
+      /* 12版 */
+      -webkit-align-items: flex-start;
+      -moz-align-items: flex-start;
+      -ms-align-items: flex-start;
+      -ms-flex-align: start;
+      -o-align-items: flex-start;
+      align-items: flex-start;
+
+      > .c-e {
+        margin-left: auto !important;
+        margin-right: auto !important;
+      }
     }
   }
 
@@ -102,21 +115,34 @@
   }
 
   &.v-middle {
-    ///* 09版 */
-    //-webkit-box-pack: center;
-    ///* 12版 */
-    //-webkit-justify-content: center;
-    //-moz-justify-content: center;
-    //-ms-justify-content: center;
-    //-ms-flex-pack: center;
-    //-o-justify-content: center;
-    //justify-content: center;
-    > .f-c {
-      margin-top: auto !important;
-    }
+    /* 09版 */
+    -webkit-box-pack: center;
+    /* 12版 */
+    -webkit-justify-content: center;
+    -moz-justify-content: center;
+    -ms-justify-content: center;
+    -ms-flex-pack: center;
+    -o-justify-content: center;
+    justify-content: center;
+
+    &.f-scroll-y {
+      /* 09版 */
+      -webkit-box-pack: flex-start;
+      /* 12版 */
+      -webkit-justify-content: flex-start;
+      -moz-justify-content: flex-start;
+      -ms-justify-content: flex-start;
+      -ms-flex-pack: start;
+      -o-justify-content: flex-start;
+      justify-content: flex-start;
+
+      > .f-c {
+        margin-top: auto !important;
+      }
 
-    > .l-c {
-      margin-bottom: auto !important;
+      > .l-c {
+        margin-bottom: auto !important;
+      }
     }
   }
 
diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less
index 6a6293f64..4c7b6029b 100644
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/src/less/core/wrapper/flex.wrapper.horizontal.less
@@ -115,14 +115,15 @@
       //-ms-flex-align: center;
       //-o-align-items: center;
       //align-items: center;
-      > .c-e {
-        margin-top: auto !important;
-        margin-bottom: auto !important;
-      }
-
-      &.h-center {
-        min-width: 100%;
-      }
+
+      //> .c-e {
+      //  margin-top: auto !important;
+      //  margin-bottom: auto !important;
+      //}
+      //
+      //&.h-center {
+      //  min-width: 100%;
+      //}
     }
 
     &.v-bottom {
@@ -163,13 +164,14 @@
       //-ms-flex-pack: center;
       //-o-justify-content: center;
       //justify-content: center;
-      > .f-c {
-        margin-left: auto !important;
-      }
 
-      > .l-c {
-        margin-right: auto !important;
-      }
+      //> .f-c {
+      //  margin-left: auto !important;
+      //}
+      //
+      //> .l-c {
+      //  margin-right: auto !important;
+      //}
     }
 
     &.h-right {
diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less
index 54d5dddcf..7ad5f2d51 100644
--- a/src/less/core/wrapper/flex.wrapper.vertical.less
+++ b/src/less/core/wrapper/flex.wrapper.vertical.less
@@ -128,10 +128,10 @@
       //-o-align-items: center;
       //align-items: center;
 
-      > .c-e {
-        margin-left: auto !important;
-        margin-right: auto !important;
-      }
+      //> .c-e {
+      //  margin-left: auto !important;
+      //  margin-right: auto !important;
+      //}
     }
 
     &.h-right {
@@ -172,13 +172,14 @@
       //-o-justify-content: center;
       //-ms-flex-pack: center;
       //justify-content: center;
-      > .f-c {
-        margin-top: auto !important;
-      }
 
-      > .l-c {
-        margin-bottom: auto !important;
-      }
+      //> .f-c {
+      //  margin-top: auto !important;
+      //}
+      //
+      //> .l-c {
+      //  margin-bottom: auto !important;
+      //}
     }
 
     &.v-bottom {