From 3f5efb98a764f57324bdb56022e158c252a32dab Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Sun, 21 Feb 2021 09:08:02 +0800
Subject: [PATCH 1/3] update

---
 .../layout/adapt/adapt.leftrightvertical.js   | 81 +++++++++++--------
 1 file changed, 49 insertions(+), 32 deletions(-)

diff --git a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
index 5a9cb6160..7cc8c0a5d 100644
--- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
@@ -15,9 +15,15 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             llgap: 0,
             lrgap: 0,
             lhgap: 0,
+            ltgap: 0,
+            lbgap: 0,
+            lvgap: 0,
             rlgap: 0,
             rrgap: 0,
-            rhgap: 0
+            rhgap: 0,
+            rtgap: 0,
+            rbgap: 0,
+            rvgap: 0
         });
     },
     render: function () {
@@ -30,11 +36,17 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 items: [{
                     el: {
                         type: "bi.vertical_adapt",
+                        ref: function (_ref) {
+                            self.left = _ref;
+                        },
                         height: "100%",
                         items: o.items.left,
                         hgap: o.lhgap,
                         lgap: o.llgap,
-                        rgap: o.lrgap
+                        rgap: o.lrgap,
+                        tgap: o.ltgap,
+                        bgap: o.lbgap,
+                        vgap: o.lvgap
                     }
                 }]
             });
@@ -45,12 +57,17 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 items: [{
                     el: {
                         type: "bi.vertical_adapt",
+                        ref: function (_ref) {
+                            self.right = _ref;
+                        },
                         height: "100%",
                         items: o.items.right,
-                        textAlign: "right",
                         hgap: o.rhgap,
                         lgap: o.rlgap,
-                        rgap: o.rrgap
+                        rgap: o.rrgap,
+                        tgap: o.rtgap,
+                        bgap: o.rbgap,
+                        vgap: o.rvgap
                     }
                 }]
             });
@@ -68,8 +85,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.LeftRightVerticalAdaptLayout.superclass.populate.apply(this, arguments);
-        this._mount();
+        this.left.populate(items.left);
+        this.right.populate(items.right);
     }
 });
 BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout);
@@ -82,27 +99,27 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
             items: [],
             lgap: 0,
             rgap: 0,
-            hgap: 0
+            hgap: 0,
+            tgap: 0,
+            bgap: 0,
+            vgap: 0
         });
     },
     render: function () {
         var o = this.options, self = this;
         BI.LeftVerticalAdaptLayout.superclass.render.apply(this, arguments);
         return {
-            type: "bi.left",
+            type: "bi.vertical_adapt",
             ref: function (_ref) {
                 self.layout = _ref;
             },
-            items: [{
-                el: {
-                    type: "bi.vertical_adapt",
-                    height: "100%",
-                    items: o.items,
-                    lgap: o.lgap,
-                    hgap: o.hgap,
-                    rgap: o.rgap
-                }
-            }]
+            items: o.items,
+            hgap: o.hgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            vgap: o.vgap
         };
     },
 
@@ -128,28 +145,28 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             items: [],
             lgap: 0,
             rgap: 0,
-            hgap: 0
+            hgap: 0,
+            tgap: 0,
+            bgap: 0,
+            vgap: 0
         });
     },
     render: function () {
         var o = this.options, self = this;
         BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments);
         return {
-            type: "bi.right",
+            type: "bi.vertical_adapt",
             ref: function (_ref) {
                 self.layout = _ref;
             },
-            items: [{
-                el: {
-                    type: "bi.vertical_adapt",
-                    height: "100%",
-                    textAlign: "right",
-                    items: o.items,
-                    lgap: o.lgap,
-                    hgap: o.hgap,
-                    rgap: o.rgap
-                }
-            }]
+            horizontalAlign: BI.HorizontalAlign.Right,
+            items: o.items.reverse(),
+            hgap: o.hgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            vgap: o.vgap
         };
     },
 
@@ -163,7 +180,7 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+        this.layout.populate(items.reverse());
     }
 });
 BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);

From 4774ade27d9c98779e1c8a48be3f53366fb58d39 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Sun, 21 Feb 2021 23:41:08 +0800
Subject: [PATCH 2/3] update

---
 .../wrapper/layout/adapt/adapt.leftrightvertical.js    | 10 ++++++++--
 src/core/wrapper/layout/flex/flex.horizontal.js        |  4 ++--
 src/core/wrapper/layout/flex/flex.vertical.js          |  4 ++--
 .../layout/flex/wrapper/flex.wrapper.horizontal.js     |  4 ++--
 .../layout/flex/wrapper/flex.wrapper.vertical.js       |  4 ++--
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
index 7cc8c0a5d..ca850fe2b 100644
--- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
@@ -119,7 +119,10 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rgap: o.rgap,
             tgap: o.tgap,
             bgap: o.bgap,
-            vgap: o.vgap
+            vgap: o.vgap,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable
         };
     },
 
@@ -166,7 +169,10 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rgap: o.rgap,
             tgap: o.tgap,
             bgap: o.bgap,
-            vgap: o.vgap
+            vgap: o.vgap,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable
         };
     },
 
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index 89550608d..32de79a2d 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -54,12 +54,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-left": ((o.horizontalAlign === BI.HorizontalAlign.Right ? o.hgap : (i === 0 ? o.hgap : 0)) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-right": ((o.horizontalAlign === BI.HorizontalAlign.Right ? (i === 0 ? o.hgap : 0) : o.hgap) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
index 28d8fd222..66f5702ef 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -48,7 +48,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-top": ((o.verticalAlign === BI.VerticalAlign.Bottom ? o.vgap : (i === 0 ? o.vgap : 0)) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
@@ -63,7 +63,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-bottom": ((o.verticalAlign === BI.VerticalAlign.Bottom ? (i === 0 ? o.vgap : 0) : o.vgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index 064560b5d..1d9e74453 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -55,12 +55,12 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-left": ((o.horizontalAlign === BI.HorizontalAlign.Right ? o.hgap : (i === 0 ? o.hgap : 0)) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-right": ((o.horizontalAlign === BI.HorizontalAlign.Right ? (i === 0 ? o.hgap : 0) : o.hgap) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
index 3e170b9a7..83b2e4606 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@@ -50,7 +50,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-top": ((o.verticalAlign === BI.VerticalAlign.Bottom ? o.vgap : (i === 0 ? o.vgap : 0)) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
@@ -65,7 +65,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-bottom": ((o.verticalAlign === BI.VerticalAlign.Bottom ? (i === 0 ? o.vgap : 0) : o.vgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;

From 9b7224ca2e2184b08b726aa724e8bc79dfc34560 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Mon, 22 Feb 2021 01:06:27 +0800
Subject: [PATCH 3/3] update

---
 src/core/platform/web/config.js               | 22 +++++++------------
 .../layout/adapt/adapt.leftrightvertical.js   |  4 ++--
 .../wrapper/layout/flex/flex.horizontal.js    |  4 ++--
 src/core/wrapper/layout/flex/flex.vertical.js |  4 ++--
 .../flex/wrapper/flex.wrapper.horizontal.js   |  4 ++--
 .../flex/wrapper/flex.wrapper.vertical.js     |  4 ++--
 src/less/core/wrapper/flex.horizontal.less    | 15 ++++++++-----
 src/less/core/wrapper/flex.vertical.less      | 15 ++++++++-----
 .../core/wrapper/flex.wrapper.horizontal.less | 13 ++++++-----
 .../core/wrapper/flex.wrapper.vertical.less   | 13 ++++++-----
 10 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js
index 8206274a3..ea1c29cf6 100644
--- a/src/core/platform/web/config.js
+++ b/src/core/platform/web/config.js
@@ -26,14 +26,14 @@ BI.prepares.push(function () {
         if (!isIE && supportFlex) {
             return BI.extend({}, ob, {type: "bi.flex_horizontal"});
         }
-        // 解决使用inline_vertical_adapt的顺序问题
-        // 从右往左放置时，为了兼容，我们统一采用从右到左的放置方式
-        if (ob.horizontalAlign === BI.HorizontalAlign.Right) {
-            return BI.extend({verticalAlign: BI.VerticalAlign.Top}, ob, {
-                type: "bi.inline_vertical_adapt",
-                items: ob.items && ob.items.reverse()
-            });
-        }
+        // // 解决使用inline_vertical_adapt的顺序问题
+        // // 从右往左放置时，为了兼容，我们统一采用从右到左的放置方式
+        // if (ob.horizontalAlign === BI.HorizontalAlign.Right) {
+        //     return BI.extend({verticalAlign: BI.VerticalAlign.Top}, ob, {
+        //         type: "bi.inline_vertical_adapt",
+        //         items: ob.items && ob.items.reverse()
+        //     });
+        // }
         return BI.extend({}, ob, {type: "bi.table_adapt"});
     });
     BI.Plugin.configWidget("bi.center_adapt", function (ob) {
@@ -43,9 +43,6 @@ BI.prepares.push(function () {
             if (!isIE && supportFlex) {
                 return BI.extend({}, ob, {type: "bi.flex_center_adapt"});
             }
-            if (ob.horizontalAlign === BI.HorizontalAlign.Right) {
-                return BI.extend({}, ob, {type: "bi.inline_center_adapt", items: ob.items && ob.items.reverse()});
-            }
             return BI.extend({}, ob, {type: "bi.inline_center_adapt"});
         }
         return ob;
@@ -57,9 +54,6 @@ BI.prepares.push(function () {
             if (!isIE && supportFlex) {
                 return BI.extend({}, ob, {type: "bi.flex_vertical_center_adapt"});
             }
-            if (ob.horizontalAlign === BI.HorizontalAlign.Right) {
-                return BI.extend({}, ob, {type: "bi.inline_vertical_adapt", items: ob.items && ob.items.reverse()});
-            }
             return BI.extend({}, ob, {type: "bi.inline_vertical_adapt"});
         }
         return ob;
diff --git a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
index ca850fe2b..8d9a9f8cb 100644
--- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
@@ -163,7 +163,7 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 self.layout = _ref;
             },
             horizontalAlign: BI.HorizontalAlign.Right,
-            items: o.items.reverse(),
+            items: o.items,
             hgap: o.hgap,
             lgap: o.lgap,
             rgap: o.rgap,
@@ -186,7 +186,7 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        this.layout.populate(items.reverse());
+        this.layout.populate(items);
     }
 });
 BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index 32de79a2d..89550608d 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -54,12 +54,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": ((o.horizontalAlign === BI.HorizontalAlign.Right ? o.hgap : (i === 0 ? o.hgap : 0)) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": ((o.horizontalAlign === BI.HorizontalAlign.Right ? (i === 0 ? o.hgap : 0) : o.hgap) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
index 66f5702ef..28d8fd222 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -48,7 +48,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": ((o.verticalAlign === BI.VerticalAlign.Bottom ? o.vgap : (i === 0 ? o.vgap : 0)) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
@@ -63,7 +63,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": ((o.verticalAlign === BI.VerticalAlign.Bottom ? (i === 0 ? o.vgap : 0) : o.vgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index 1d9e74453..064560b5d 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -55,12 +55,12 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-left": ((o.horizontalAlign === BI.HorizontalAlign.Right ? o.hgap : (i === 0 ? o.hgap : 0)) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
             w.element.css({
-                "margin-right": ((o.horizontalAlign === BI.HorizontalAlign.Right ? (i === 0 ? o.hgap : 0) : o.hgap) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
index 83b2e4606..3e170b9a7 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@@ -50,7 +50,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-top": ((o.verticalAlign === BI.VerticalAlign.Bottom ? o.vgap : (i === 0 ? o.vgap : 0)) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
@@ -65,7 +65,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
         }
         if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
-                "margin-bottom": ((o.verticalAlign === BI.VerticalAlign.Bottom ? (i === 0 ? o.vgap : 0) : o.vgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
             });
         }
         return w;
diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less
index ab5fbac8f..baec91f31 100644
--- a/src/less/core/wrapper/flex.horizontal.less
+++ b/src/less/core/wrapper/flex.horizontal.less
@@ -105,18 +105,21 @@
     -webkit-justify-content: center;
     -moz-justify-content: center;
     -ms-justify-content: center;
-    -o-justify-content: center;
     -ms-flex-pack: center;
+    -o-justify-content: center;
     justify-content: center;
   }
 
   &.h-right {
+    /* 09版 */
+    -webkit-box-pack: flex-end;
     /* 12版 */
-    -webkit-flex-direction: row-reverse;
-    -moz-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    -o-flex-direction: row-reverse;
-    flex-direction: row-reverse;
+    -webkit-justify-content: flex-end;
+    -moz-justify-content: flex-end;
+    -ms-justify-content: flex-end;
+    -ms-flex-pack: end;
+    -o-justify-content: flex-end;
+    justify-content: flex-end;
   }
 
   > .shrink-none {
diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less
index fef267687..26fc982aa 100644
--- a/src/less/core/wrapper/flex.vertical.less
+++ b/src/less/core/wrapper/flex.vertical.less
@@ -104,18 +104,21 @@
     -webkit-justify-content: center;
     -moz-justify-content: center;
     -ms-justify-content: center;
-    -o-justify-content: center;
     -ms-flex-pack: center;
+    -o-justify-content: center;
     justify-content: center;
   }
 
   &.v-bottom {
+    /* 09版 */
+    -webkit-box-pack: flex-end;
     /* 12版 */
-    -webkit-flex-direction: column-reverse;
-    -moz-flex-direction: column-reverse;
-    -ms-flex-direction: column-reverse;
-    -o-flex-direction: column-reverse;
-    flex-direction: column-reverse;
+    -webkit-justify-content: flex-end;
+    -moz-justify-content: flex-end;
+    -ms-justify-content: flex-end;
+    -ms-flex-pack: end;
+    -o-justify-content: flex-end;
+    justify-content: flex-end;
   }
 
   > .shrink-none {
diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less
index 37d3df83d..80774e540 100644
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/src/less/core/wrapper/flex.wrapper.horizontal.less
@@ -118,12 +118,15 @@
     }
 
     &.h-right {
+      /* 09版 */
+      -webkit-box-pack: flex-end;
       /* 12版 */
-      -webkit-flex-direction: row-reverse;
-      -moz-flex-direction: row-reverse;
-      -ms-flex-direction: row-reverse;
-      -o-flex-direction: row-reverse;
-      flex-direction: row-reverse;
+      -webkit-justify-content: flex-end;
+      -moz-justify-content: flex-end;
+      -ms-justify-content: flex-end;
+      -ms-flex-pack: end;
+      -o-justify-content: flex-end;
+      justify-content: flex-end;
     }
 
     > .shrink-none {
diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less
index 19ad874bc..d7e8ce6e7 100644
--- a/src/less/core/wrapper/flex.wrapper.vertical.less
+++ b/src/less/core/wrapper/flex.wrapper.vertical.less
@@ -118,12 +118,15 @@
     }
 
     &.v-bottom {
+      /* 09版 */
+      -webkit-box-pack: flex-end;
       /* 12版 */
-      -webkit-flex-direction: column-reverse;
-      -moz-flex-direction: column-reverse;
-      -ms-flex-direction: column-reverse;
-      -o-flex-direction: column-reverse;
-      flex-direction: column-reverse;
+      -webkit-justify-content: flex-end;
+      -moz-justify-content: flex-end;
+      -ms-justify-content: flex-end;
+      -ms-flex-pack: end;
+      -o-justify-content: flex-end;
+      justify-content: flex-end;
     }
 
     > .shrink-none {