Pull request #1853: BI-57022 left_right_vertical_adapt换一种实现

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit '84e90c13b37070fe547daea09e58dc32d89c55ed': (28 commits)
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  优化布局
  ...

changelog.md

@@ -1,5 +1,7 @@
 # 更新日志
 2.0(2021-03)
+- 优化left_right_vertical_adapt布局，去掉float属性只使用flex
+- inline布局支持用calc计算fill列宽度
 - 时间类型控件无翻页限制
 - 时间类型控件优化动态时间面板的交互
 

src/core/platform/web/config.js

@@ -21,41 +21,73 @@ BI.prepares.push(function () {
         // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况）
         // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景
         if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
+            var justOneItem = (ob.items && ob.items.length <= 1);
+            // 在这种情况下，也可以通过flex支持该布局
+            if (supportFlex) {
+                // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+                // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) {
+                return BI.extend({}, ob, {
+                    type: "bi.flex_horizontal",
+                    horizontalAlign: !justOneItem && ob.horizontalAlign === BI.HorizontalAlign.Center
+                        ? BI.HorizontalAlign.Left : ob.horizontalAlign
+                });
+                // }
+            }
+            // // IE9以上可以使用calc计算布局
+            // if (!isIE || BI.getIEVersion() > 8) {
+            //     return BI.extend({}, ob, {
+            //         type: "bi.inline",
+            //         horizontalAlign: !justOneItem && ob.horizontalAlign === BI.HorizontalAlign.Center
+            //             ? BI.HorizontalAlign.Left : ob.horizontalAlign
+            //     });
+            // }
             return BI.extend({}, ob, {type: "bi.table_adapt"});
         }
-        if (!isIE && supportFlex) {
+        if (supportFlex) {
+            // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+            // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) {
             return BI.extend({}, ob, {type: "bi.flex_horizontal"});
+            // }
         }
-        // // 解决使用inline_vertical_adapt的顺序问题
+        // // IE9以上采用inline
-        // // 从右往左放置时，为了兼容，我们统一采用从右到左的放置方式
+        // if (!isIE || BI.getIEVersion() > 8) {
-        // if (ob.horizontalAlign === BI.HorizontalAlign.Right) {
+        //     return BI.extend({}, ob, {
-        //     return BI.extend({verticalAlign: BI.VerticalAlign.Top}, ob, {
+        //         type: "bi.inline"
-        //         type: "bi.inline_vertical_adapt",
-        //         items: ob.items && ob.items.reverse()
         //     });
         // }
+        // 否则采用table，不过horizontalAlign的right就不支持了。
         return BI.extend({}, ob, {type: "bi.table_adapt"});
     });
     BI.Plugin.configWidget("bi.center_adapt", function (ob) {
-        var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
+        var supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
         if (!isAdapt || justOneItem) {
-            if (!isIE && supportFlex) {
+            if (supportFlex) {
+                // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+                // if (!isIE || (ob.scrollable !== true && ob.scrollx !== true && ob.scrolly !== true)) {
                 return BI.extend({}, ob, {type: "bi.flex_center_adapt"});
+                // }
             }
+            if (!BI.isIE() || BI.getIEVersion() > 8) {
                 return BI.extend({}, ob, {type: "bi.inline_center_adapt"});
             }
+        }
         return ob;
     });
     BI.Plugin.configWidget("bi.vertical_adapt", function (ob) {
-        var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
+        var supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
         if (!isAdapt || justOneItem) {
-            if (!isIE && supportFlex) {
+            if (supportFlex) {
-                return BI.extend({}, ob, {type: "bi.flex_vertical_center_adapt"});
+                // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+                // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) {
+                return BI.extend({}, ob, {type: "bi.flex_vertical_adapt"});
+                // }
             }
+            if (!BI.isIE() || BI.getIEVersion() > 8) {
                 return BI.extend({}, ob, {type: "bi.inline_vertical_adapt"});
             }
+        }
         return ob;
     });
     BI.Plugin.configWidget("bi.horizontal_adapt", function (ob) {
@@ -68,45 +100,35 @@ BI.prepares.push(function () {
         return ob;
     });
     BI.Plugin.configWidget("bi.horizontal_float", function (ob) {
-        if (!BI.isIE() && isSupportFlex()) {
+        if (isSupportFlex()) {
+            // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+            // if (!BI.isIE() || (ob.scrollable !== true && ob.scrollx !== true)) {
             return BI.extend({}, ob, {type: "bi.flex_horizontal_adapt"});
+            // }
         }
         return BI.extend({}, ob, {type: "bi.inline_horizontal_adapt"});
     });
-
+    BI.Plugin.configWidget("bi.left_right_vertical_adapt", function (ob) {
+        if (isSupportFlex()) {
+            // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+            // if (!BI.isIE() || (ob.scrollable !== true && ob.scrolly !== true)) {
+            return BI.extend({}, ob, {type: "bi.flex_left_right_vertical_adapt"});
+            // }
+        }
+        return ob;
+    });
     BI.Plugin.configWidget("bi.flex_horizontal", function (ob) {
-        if (ob.scrollable === true || ob.scrolly === true) {
+        if (ob.scrollable === true || ob.scrollx !== false) {
+            if (ob.hgap > 0 || ob.rgap > 0) {// flex中最后一个margin-right不生效
                 return BI.extend({}, ob, {type: "bi.flex_scrollable_horizontal"});
             }
+        }
     });
     BI.Plugin.configWidget("bi.flex_vertical", function (ob) {
         if (ob.scrollable === true || ob.scrollx === true) {
+            if (ob.hgap > 0 || ob.rgap > 0) {// flex中最后一个margin-right不生效
                 return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical"});
             }
-    });
-    BI.Plugin.configWidget("bi.flex_horizontal_adapt", function (ob) {
-        if (ob.scrollable === true || ob.scrollx === true) {
-            return BI.extend({}, ob, {type: "bi.flex_scrollable_horizontal_adapt"});
-        }
-    });
-    BI.Plugin.configWidget("bi.flex_vertical_adapt", function (ob) {
-        if (ob.scrollable === true || ob.scrolly === true) {
-            return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_adapt"});
-        }
-    });
-    BI.Plugin.configWidget("bi.flex_horizontal_center_adapt", function (ob) {
-        if (ob.scrollable === true || ob.scrollx === true) {
-            return BI.extend({}, ob, {type: "bi.flex_scrollable_horizontal_adapt"});
-        }
-    });
-    BI.Plugin.configWidget("bi.flex_vertical_center_adapt", function (ob) {
-        if (ob.scrollable === true || ob.scrolly === true) {
-            return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_adapt"});
-        }
-    });
-    BI.Plugin.configWidget("bi.flex_center_adapt", function (ob) {
-        if (ob.scrollable === true || ob.scrolly === true || ob.scrollx === true) {
-            return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
         }
     });
 

src/core/plugin.js

@@ -81,6 +81,10 @@ BI.Plugin = BI.Plugin || {};
             return res || object;
         },
 
+        hasObject: function (type) {
+            return __GlobalObjectConfigFns.length > 0 || !!_ObjectPlugin[type];
+        },
+
         registerObject: function (type, fn) {
             if (!_ObjectPlugin[type]) {
                 _ObjectPlugin[type] = [];

src/core/shortcut.js

@@ -56,24 +56,34 @@
         if (item.type || options.type) {
             el = BI.extend({}, options, item);
             w = BI.Plugin.getWidget(el.type, el);
+            if (w.type === el.type) {
+                if (BI.Plugin.hasObject(el.type)) {
                     w.listeners = (w.listeners || []).concat([{
                         eventName: BI.Events.MOUNT,
                         action: function () {
                             BI.Plugin.getObject(el.type, this);
                         }
                     }]);
-            return w.type === el.type ? createWidget(w, context, lazy) : BI.createWidget(BI.extend({/**important**/}, el, {type: w.type}), options, context, lazy);
+                }
+                return createWidget(w, context, lazy);
+            }
+            return BI.createWidget(w, options, context, lazy);
         }
         if (item.el && (item.el.type || options.type)) {
             el = BI.extend({}, options, item.el);
             w = BI.Plugin.getWidget(el.type, el);
+            if (w.type === el.type) {
+                if (BI.Plugin.hasObject(el.type)) {
                     w.listeners = (w.listeners || []).concat([{
                         eventName: BI.Events.MOUNT,
                         action: function () {
                             BI.Plugin.getObject(el.type, this);
                         }
                     }]);
-            return w.type === el.type ? createWidget(w, context, lazy) : BI.createWidget(BI.extend({/**important**/}, el, {type: w.type}), options, context, lazy);
+                }
+                return createWidget(w, context, lazy);
+            }
+            return BI.createWidget(w, options, context, lazy);
         }
         if (BI.isWidget(item.el)) {
             return item.el;

src/core/wrapper/layout/adapt/adapt.table.js

@@ -35,7 +35,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
     _addElement: function (i, item) {
         var o = this.options;
         var td;
-        var width = o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : o.columnSize[i];
+        var width = o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]);
         if (!this.hasWidget(this._getChildName(i))) {
             var w = BI._lazyCreateWidget(item);
             w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});

src/core/wrapper/layout/adapt/inline.center.js

@@ -25,67 +25,27 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     render: function () {
-        BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
-        var o = this.options;
+        return {
-        this.element.css({
+            type: "bi.inline",
-            whiteSpace: "nowrap",
+            ref: function (_ref) {
-            textAlign: o.horizontalAlign
+                self.layout = _ref;
-        });
-        this.populate(o.items);
             },
-
+            items: o.items,
-    _addElement: function (i, item, length) {
+            horizontalAlign: o.horizontalAlign,
-        var o = this.options;
+            verticalAlign: o.verticalAlign,
-        var w = BI.InlineCenterAdaptLayout.superclass._addElement.apply(this, arguments);
+            columnSize: o.columnSize,
-        w.element.css({
+            hgap: o.hgap,
-            width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit),
+            vgap: o.vgap,
-            position: "relative",
+            lgap: o.lgap,
-            "vertical-align": o.verticalAlign
+            rgap: o.rgap,
-        });
+            tgap: o.tgap,
-        w.element.addClass("i-c-a-item");
+            bgap: o.bgap
-        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+        };
-            w.element.css({
-                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
-            });
-        }
-        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
-            });
-        }
-        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
-            });
-        }
-        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))
-            });
-        }
-        return w;
-    },
-
-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
-    addItem: function (item) {
-        throw new Error("不能添加元素");
-    },
-
-    stroke: function (items) {
-        var self = this;
-        BI.each(items, function (i, item) {
-            if (item) {
-                self._addElement(i, item, items.length);
-            }
-        });
     },
 
     populate: function (items) {
-        BI.InlineCenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this.layout, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);

src/core/wrapper/layout/adapt/inline.horizontal.js

@@ -25,67 +25,27 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     render: function () {
-        BI.InlineHorizontalAdaptLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
-        var o = this.options;
+        return {
-        this.element.css({
+            type: "bi.inline",
-            whiteSpace: "nowrap",
+            ref: function (_ref) {
-            textAlign: o.horizontalAlign
+                self.layout = _ref;
-        });
-        this.populate(o.items);
             },
-
+            items: o.items,
-    _addElement: function (i, item, length) {
+            horizontalAlign: o.horizontalAlign,
-        var o = this.options;
+            verticalAlign: o.verticalAlign,
-        var w = BI.InlineHorizontalAdaptLayout.superclass._addElement.apply(this, arguments);
+            columnSize: o.columnSize,
-        w.element.css({
+            hgap: o.hgap,
-            width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit),
+            vgap: o.vgap,
-            position: "relative",
+            lgap: o.lgap,
-            "vertical-align": o.verticalAlign
+            rgap: o.rgap,
-        });
+            tgap: o.tgap,
-        w.element.addClass("i-h-a-item");
+            bgap: o.bgap
-        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+        };
-            w.element.css({
-                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
-            });
-        }
-        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
-            });
-        }
-        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
-            });
-        }
-        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
-            });
-        }
-        return w;
-    },
-
-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
-    addItem: function (item) {
-        throw new Error("不能添加元素");
-    },
-
-    stroke: function (items) {
-        var self = this;
-        BI.each(items, function (i, item) {
-            if (item) {
-                self._addElement(i, item, items.length);
-            }
-        });
     },
 
     populate: function (items) {
-        BI.InlineHorizontalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this.layout, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout);

src/core/wrapper/layout/adapt/inline.vertical.js

@@ -25,54 +25,27 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     render: function () {
-        BI.InlineVerticalAdaptLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
-        var o = this.options;
+        return {
-        this.element.css({
+            type: "bi.inline",
-            whiteSpace: "nowrap",
+            ref: function (_ref) {
-            textAlign: o.horizontalAlign
+                self.layout = _ref;
-        });
-        this.populate(o.items);
             },
-
+            items: o.items,
-    _addElement: function (i, item) {
+            horizontalAlign: o.horizontalAlign,
-        var o = this.options;
+            verticalAlign: o.verticalAlign,
-        var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
+            columnSize: o.columnSize,
-        w.element.css({
+            hgap: o.hgap,
-            width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit),
+            vgap: o.vgap,
-            position: "relative",
+            lgap: o.lgap,
-            "vertical-align": o.verticalAlign
+            rgap: o.rgap,
-        });
+            tgap: o.tgap,
-        w.element.addClass("i-v-a-item");
+            bgap: o.bgap
-        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+        };
-            w.element.css({
-                "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
-            });
-        }
-        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
-            });
-        }
-        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
-            });
-        }
-        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
-            });
-        }
-        return w;
-    },
-
-    resize: function () {
-        this.stroke(this.options.items);
     },
 
     populate: function (items) {
-        BI.InlineVerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this.layout, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);

src/core/wrapper/layout/flex/flex.horizontal.js

@@ -35,17 +35,24 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
             position: "relative"
         });
         if (o.columnSize[i] !== "auto") {
-            if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") {
+            if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] === "fill") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.columnSize[i] > 0) {
-            w.element.width(o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit));
+            w.element.width(o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)));
         }
         if (o.columnSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
+        }
+        w.element.addClass("c-e");
+        if (i === 0) {
+            w.element.addClass("f-c");
+        }
+        if (i === o.items.length - 1) {
+            w.element.addClass("l-c");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

src/core/wrapper/layout/flex/flex.leftrightvertical.center.js

@@ -0,0 +1,102 @@
+BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-f-lr-v-c",
+            items: {},
+            llgap: 0,
+            lrgap: 0,
+            lhgap: 0,
+            ltgap: 0,
+            lbgap: 0,
+            lvgap: 0,
+            rlgap: 0,
+            rrgap: 0,
+            rhgap: 0,
+            rtgap: 0,
+            rbgap: 0,
+            rvgap: 0
+        });
+    },
+    render: function () {
+        var o = this.options, self = this;
+        BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+        return {
+            type: "bi.flex_vertical_adapt",
+            ref: function (_ref) {
+                self.layout = _ref;
+            },
+            items: this._formatItems(),
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable
+        };
+    },
+
+    _formatItems: function () {
+        var o = this.options;
+        var leftItems = o.items.left || [];
+        var rightItems = o.items.right || [];
+        leftItems = BI.map(leftItems, function (i, item) {
+            var json = {
+                el: BI.stripEL(item)
+            };
+            if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+                json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0);
+            }
+            if (o.lhgap + o.llgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + (item.lgap || 0) + (item.hgap || 0);
+            }
+            if (o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
+                json.rgap = o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0);
+            }
+            if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
+                json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0);
+            }
+            return json;
+        });
+        rightItems = BI.map(rightItems, function (i, item) {
+            if (i === 0) {
+                if (BI.isWidget(item)) {
+                    item.addClass("flex-left-auto");
+                } else {
+                    var t = BI.stripEL(item);
+                    t.cls = (t.cls || "") + " flex-left-auto";
+                }
+            }
+            var json = {
+                el: BI.stripEL(item)
+            };
+            if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+                json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0);
+            }
+            if (o.rhgap + o.rlgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+                if (i > 0) {
+                    json.lgap = o.rlgap + (item.lgap || 0) + (item.hgap || 0);
+                }
+            }
+            if (o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
+                json.rgap = o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0);
+            }
+            if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
+                json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0);
+            }
+            return json;
+        });
+        return leftItems.concat(rightItems);
+    },
+
+    resize: function () {
+        // console.log("left_right_vertical_adapt布局不需要resize");
+    },
+
+    addItem: function () {
+        // do nothing
+        throw new Error("cannot be added");
+    },
+
+    populate: function (items) {
+        this.options.items = items;
+        this.layout.populate(this._formatItems());
+    }
+});
+BI.shortcut("bi.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout);

src/core/wrapper/layout/flex/flex.vertical.js

@@ -34,17 +34,24 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
             position: "relative"
         });
         if (o.rowSize[i] !== "auto") {
-            if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") {
+            if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] === "fill") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.rowSize[i] > 0) {
-            w.element.height(o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit));
+            w.element.height(o.rowSize[i] === "" ? "" : (o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit)));
         }
         if (o.rowSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
+        }
+        w.element.addClass("c-e");
+        if (i === 0) {
+            w.element.addClass("f-c");
+        }
+        if (i === o.items.length - 1) {
+            w.element.addClass("l-c");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@@ -8,7 +8,7 @@
 BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-f-s-h clearfix",
+            baseCls: "bi-f-s-h",
             verticalAlign: BI.VerticalAlign.Top,
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
@@ -25,6 +25,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
@@ -37,16 +38,23 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
         });
         if (o.columnSize[i] !== "auto") {
             if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.columnSize[i] > 0) {
-            w.element.width(o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit));
+            w.element.width(o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)));
         }
         if (o.columnSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
+        }
+        w.element.addClass("c-e");
+        if (i === 0) {
+            w.element.addClass("f-c");
+        }
+        if (i === o.items.length - 1) {
+            w.element.addClass("l-c");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@@ -8,7 +8,7 @@
 BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-f-s-v clearfix",
+            baseCls: "bi-f-s-v",
             horizontalAlign: BI.HorizontalAlign.Left,
             verticalAlign: BI.VerticalAlign.Top,
             rowSize: [],
@@ -25,6 +25,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
@@ -37,16 +38,23 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
         });
         if (o.rowSize[i] !== "auto") {
             if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.rowSize[i] > 0) {
-            w.element.height(o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit));
+            w.element.height(o.rowSize[i] === "" ? "" : (o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit)));
         }
         if (o.rowSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
+        }
+        w.element.addClass("c-e");
+        if (i === 0) {
+            w.element.addClass("f-c");
+        }
+        if (i === o.items.length - 1) {
+            w.element.addClass("l-c");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

src/core/wrapper/layout/layout.horizontal.js

@@ -39,7 +39,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     _addElement: function (i, item) {
         var o = this.options;
         var td;
-        var width = o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : o.columnSize[i];
+        var width = o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]);
         if (!this.hasWidget(this._getChildName(i))) {
             var w = BI._lazyCreateWidget(item);
             w.element.css({position: "relative", margin: "0px auto"});

src/core/wrapper/layout/layout.inline.js

@@ -12,6 +12,9 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-i",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -23,13 +26,36 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.InlineLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var o = this.options;
+        this.element.css({
+            textAlign: o.horizontalAlign
+        });
+        this.populate(o.items);
     },
 
-    _addElement: function (i, item) {
+    _addElement: function (i, item, length) {
         var o = this.options;
         var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1});
+        w.element.css({
+            width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)),
+            position: "relative",
+            "vertical-align": o.verticalAlign
+        });
+        w.element.addClass("i-item");
+        if (o.columnSize[i] === "fill") {
+            var left = o.hgap + (item.lgap || 0) + (item.hgap || 0),
+                right = o.hgap + (item.rgap || 0) + (item.hgap || 0);
+            for (var k = 0; k < i; k++) {
+                left += o.hgap + o.lgap + o.rgap + o.columnSize[k];
+            }
+            for (var k = i + 1; k < o.columnSize.length; k++) {
+                right += o.hgap + o.lgap + o.rgap + o.columnSize[k];
+            }
+            w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
+            if (o.horizontalAlign === BI.HorizontalAlign.Stretch) {
+                w.element.width(0);
+            }
+        }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
                 "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
@@ -57,6 +83,19 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
         this.stroke(this.options.items);
     },
 
+    addItem: function (item) {
+        throw new Error("不能添加元素");
+    },
+
+    stroke: function (items) {
+        var self = this;
+        BI.each(items, function (i, item) {
+            if (item) {
+                self._addElement(i, item, items.length);
+            }
+        });
+    },
+
     populate: function (items) {
         BI.InlineLayout.superclass.populate.apply(this, arguments);
         this._mount();

src/core/wrapper/layout/layout.table.js

@@ -9,21 +9,11 @@ BI.TableLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TableLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-t",
             scrolly: true,
-            columnSize: [200, 200, "fill"],
+            columnSize: [],
             rowSize: 30,  // or [30,30,30]
             hgap: 0,
             vgap: 0,
-            items: [[
+            items: []
-                {
-                    el: {text: "label1"}
-                },
-                {
-                    el: {text: "label2"}
-                },
-                {
-                    el: {text: "label3"}
-                }
-            ]]
         });
     },
     render: function () {

src/core/wrapper/layout/layout.td.js

@@ -7,20 +7,14 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-td",
-            columnSize: [200, 200, 200],
+            columnSize: [],
             hgap: 0,
             vgap: 0,
-            items: [[
+            tgap: 0,
-                {
+            bgap: 0,
-                    el: {text: "label1"}
+            lgap: 0,
-                },
+            rgap: 0,
-                {
+            items: []
-                    el: {text: "label2"}
-                },
-                {
-                    el: {text: "label3"}
-                }
-            ]]
         });
     },
     render: function () {
@@ -85,22 +79,31 @@ BI.TdLayout = BI.inherit(BI.Layout, {
         for (var i = 0; i < arr.length; i++) {
             var w = BI._lazyCreateWidget(arr[i]);
             w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            if (arr[i].lgap) {
+            var item = arr[i];
-                w.element.css({"margin-left": arr[i].lgap / BI.pixRatio + BI.pixUnit});
+            if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+                w.element.css({
+                    "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
-            if (arr[i].rgap) {
+            if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-                w.element.css({"margin-right": arr[i].rgap / BI.pixRatio + BI.pixUnit});
+                w.element.css({
+                    "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
-            if (arr[i].tgap) {
+            if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-                w.element.css({"margin-top": arr[i].tgap / BI.pixRatio + BI.pixUnit});
+                w.element.css({
+                    "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
-            if (arr[i].bgap) {
+            if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-                w.element.css({"margin-bottom": arr[i].bgap / BI.pixRatio + BI.pixUnit});
+                w.element.css({
+                    "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
             first(w, this.rows++, i);
             var td = BI._lazyCreateWidget({
                 type: "bi.default",
-                width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : o.columnSize[i],
+                width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]),
                 tagName: "td",
                 items: [w]
             });

src/less/core/wrapper/flex.horizontal.less

@@ -63,15 +63,19 @@
   flex-wrap: nowrap;
 
   &.v-middle {
-    /* 09版 */
+    ///* 09版 */
-    -webkit-box-align: center;
+    //-webkit-box-align: center;
-    /* 12版 */
+    ///* 12版 */
-    -webkit-align-items: center;
+    //-webkit-align-items: center;
-    -moz-align-items: center;
+    //-moz-align-items: center;
-    -ms-align-items: center;
+    //-ms-align-items: center;
-    -ms-flex-align: center;
+    //-ms-flex-align: center;
-    -o-align-items: center;
+    //-o-align-items: center;
-    align-items: center;
+    //align-items: center;
+    > .c-e {
+      margin-top: auto !important;
+      margin-bottom: auto !important;
+    }
   }
 
   &.v-bottom {
@@ -99,15 +103,22 @@
   }
 
   &.h-center {
-    /* 09版 */
+    ///* 09版 */
-    -webkit-box-pack: center;
+    //-webkit-box-pack: center;
-    /* 12版 */
+    ///* 12版 */
-    -webkit-justify-content: center;
+    //-webkit-justify-content: center;
-    -moz-justify-content: center;
+    //-moz-justify-content: center;
-    -ms-justify-content: center;
+    //-ms-justify-content: center;
-    -ms-flex-pack: center;
+    //-ms-flex-pack: center;
-    -o-justify-content: center;
+    //-o-justify-content: center;
-    justify-content: center;
+    //justify-content: center;
+    > .f-c {
+      margin-left: auto !important;
+    }
+
+    > .l-c {
+      margin-right: auto !important;
+    }
   }
 
   &.h-right {
@@ -122,14 +133,14 @@
     justify-content: flex-end;
   }
 
-  > .shrink-none {
+  > .f-s-n {
     -webkit-flex-shrink: 0;
     -moz-flex-shrink: 0;
     -ms-flex-shrink: 0;
     flex-shrink: 0;
   }
 
-  > .fill {
+  > .f-f {
     -webkit-flex-grow: 1;
     -moz-flex-grow: 1;
     -ms-flex-grow: 1;

src/less/core/wrapper/flex.leftrightvertical.center.less

@@ -0,0 +1,5 @@
+.bi-f-lr-v-c {
+  > .flex-left-auto {
+    margin-left: auto;
+  }
+}

src/less/core/wrapper/flex.vertical.less

@@ -28,7 +28,7 @@
   flex-direction: row;
 }
 
-.bi-f-v, .bi-flex-vertical-layout{
+.bi-f-v, .bi-flex-vertical-layout {
   .flex();
   .vertical();
 
@@ -62,15 +62,19 @@
   flex-wrap: nowrap;
 
   &.h-center {
-    /* 09版 */
+    ///* 09版 */
-    -webkit-box-align: center;
+    //-webkit-box-align: center;
-    /* 12版 */
+    ///* 12版 */
-    -webkit-align-items: center;
+    //-webkit-align-items: center;
-    -moz-align-items: center;
+    //-moz-align-items: center;
-    -ms-align-items: center;
+    //-ms-align-items: center;
-    -ms-flex-align: center;
+    //-ms-flex-align: center;
-    -o-align-items: center;
+    //-o-align-items: center;
-    align-items: center;
+    //align-items: center;
+    > .c-e {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
   }
 
   &.h-right {
@@ -98,15 +102,22 @@
   }
 
   &.v-middle {
-    /* 09版 */
+    ///* 09版 */
-    -webkit-box-pack: center;
+    //-webkit-box-pack: center;
-    /* 12版 */
+    ///* 12版 */
-    -webkit-justify-content: center;
+    //-webkit-justify-content: center;
-    -moz-justify-content: center;
+    //-moz-justify-content: center;
-    -ms-justify-content: center;
+    //-ms-justify-content: center;
-    -ms-flex-pack: center;
+    //-ms-flex-pack: center;
-    -o-justify-content: center;
+    //-o-justify-content: center;
-    justify-content: center;
+    //justify-content: center;
+    > .f-c {
+      margin-top: auto !important;
+    }
+
+    > .l-c {
+      margin-bottom: auto !important;
+    }
   }
 
   &.v-bottom {
@@ -121,14 +132,14 @@
     justify-content: flex-end;
   }
 
-  > .shrink-none {
+  > .f-s-n {
     -webkit-flex-shrink: 0;
     -moz-flex-shrink: 0;
     -ms-flex-shrink: 0;
     flex-shrink: 0;
   }
 
-  > .fill {
+  > .f-f {
     -webkit-flex-grow: 1;
     -moz-flex-grow: 1;
     -ms-flex-grow: 1;

src/less/core/wrapper/flex.wrapper.horizontal.less

@@ -29,6 +29,47 @@
 }
 
 .bi-f-s-h, .bi-flex-scrollable-horizontal-layout {
+  .flex();
+
+  &.h-center {
+    > .f-s-h-w {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+  }
+
+  &.v-middle {
+    > .f-s-h-w {
+      margin-top: auto !important;
+      margin-right: auto !important;
+    }
+  }
+
+  &.h-right {
+    /* 09版 */
+    -webkit-box-pack: flex-end;
+    /* 12版 */
+    -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;
+  }
+
+
+  &.v-bottom {
+    /* 09版 */
+    -webkit-box-align: flex-end;
+    /* 12版 */
+    -webkit-align-items: flex-end;
+    -moz-align-items: flex-end;
+    -ms-align-items: flex-end;
+    -ms-flex-align: end;
+    -o-align-items: flex-end;
+    align-items: flex-end;
+  }
+
   & .f-s-h-w, & .flex-scrollable-horizontal-layout-wrapper {
     .flex();
     .horizontal();
@@ -65,19 +106,22 @@
     min-height: 100%;
 
     &.v-middle {
-      /* 09版 */
+      ///* 09版 */
-      -webkit-box-align: center;
+      //-webkit-box-align: center;
-      /* 12版 */
+      ///* 12版 */
-      -webkit-align-items: center;
+      //-webkit-align-items: center;
-      -moz-align-items: center;
+      //-moz-align-items: center;
-      -ms-align-items: center;
+      //-ms-align-items: center;
-      -ms-flex-align: center;
+      //-ms-flex-align: center;
-      -o-align-items: center;
+      //-o-align-items: center;
-      align-items: center;
+      //align-items: center;
+      > .c-e {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+      }
 
       &.h-center {
         min-width: 100%;
-        float: left;
       }
     }
 
@@ -106,15 +150,22 @@
     }
 
     &.h-center {
-      /* 09版 */
+      ///* 09版 */
-      -webkit-box-pack: center;
+      //-webkit-box-pack: center;
-      /* 12版 */
+      ///* 12版 */
-      -webkit-justify-content: center;
+      //-webkit-justify-content: center;
-      -moz-justify-content: center;
+      //-moz-justify-content: center;
-      -ms-justify-content: center;
+      //-ms-justify-content: center;
-      -ms-flex-pack: center;
+      //-ms-flex-pack: center;
-      -o-justify-content: center;
+      //-o-justify-content: center;
-      justify-content: center;
+      //justify-content: center;
+      > .f-c {
+        margin-left: auto !important;
+      }
+
+      > .l-c {
+        margin-right: auto !important;
+      }
     }
 
     &.h-right {
@@ -129,14 +180,14 @@
       justify-content: flex-end;
     }
 
-    > .shrink-none {
+    > .f-s-n {
       -webkit-flex-shrink: 0;
       -moz-flex-shrink: 0;
       -ms-flex-shrink: 0;
       flex-shrink: 0;
     }
 
-    > .fill {
+    > .f-f {
       -webkit-flex-grow: 1;
       -moz-flex-grow: 1;
       -ms-flex-grow: 1;

src/less/core/wrapper/flex.wrapper.vertical.less

@@ -29,6 +29,59 @@
 }
 
 .bi-f-s-v, .bi-flex-scrollable-vertical-layout {
+  .flex();
+  .vertical();
+
+  &.h-center {
+    > .f-s-v-w {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+  }
+
+  &.v-middle {
+    > .f-s-v-w {
+      margin-top: auto !important;
+      margin-bottom: auto !important;
+    }
+  }
+
+  &.h-right {
+    /* 09版 */
+    -webkit-box-align: flex-end;
+    /* 12版 */
+    -webkit-align-items: flex-end;
+    -moz-align-items: flex-end;
+    -ms-align-items: flex-end;
+    -ms-flex-align: end;
+    -o-align-items: flex-end;
+    align-items: flex-end;
+  }
+
+  &.v-bottom {
+    /* 09版 */
+    -webkit-box-pack: flex-end;
+    /* 12版 */
+    -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;
+  }
+
+  &.h-stretch {
+    /* 09版 */
+    -webkit-box-align: stretch;
+    /* 12版 */
+    -webkit-align-items: stretch;
+    -moz-align-items: stretch;
+    -ms-align-items: stretch;
+    -ms-flex-align: stretch;
+    -o-align-items: stretch;
+    align-items: stretch;
+  }
+
   & .f-s-v-w, & .flex-scrollable-vertical-layout-wrapper {
     .flex();
     .vertical();
@@ -62,22 +115,26 @@
     -o-flex-wrap: nowrap;
     flex-wrap: nowrap;
 
-    min-width: 100%;
+    //min-width: 100%;
 
     &.h-center {
-      /* 09版 */
+      ///* 09版 */
-      -webkit-box-align: center;
+      //-webkit-box-align: center;
-      /* 12版 */
+      ///* 12版 */
-      -webkit-align-items: center;
+      //-webkit-align-items: center;
-      -moz-align-items: center;
+      //-moz-align-items: center;
-      -ms-align-items: center;
+      //-ms-align-items: center;
-      -ms-flex-align: center;
+      //-ms-flex-align: center;
-      -o-align-items: center;
+      //-o-align-items: center;
-      align-items: center;
+      //align-items: center;
+
+      > .c-e {
+        margin-left: auto !important;
+        margin-right: auto !important;
+      }
 
       &.v-middle {
         min-height: 100%;
-        float: left;
       }
     }
 
@@ -106,15 +163,22 @@
     }
 
     &.v-middle {
-      /* 09版 */
+      ///* 09版 */
-      -webkit-box-pack: center;
+      //-webkit-box-pack: center;
-      /* 12版 */
+      ///* 12版 */
-      -webkit-justify-content: center;
+      //-webkit-justify-content: center;
-      -moz-justify-content: center;
+      //-moz-justify-content: center;
-      -ms-justify-content: center;
+      //-ms-justify-content: center;
-      -o-justify-content: center;
+      //-o-justify-content: center;
-      -ms-flex-pack: center;
+      //-ms-flex-pack: center;
-      justify-content: center;
+      //justify-content: center;
+      > .f-c {
+        margin-top: auto !important;
+      }
+
+      > .l-c {
+        margin-bottom: auto !important;
+      }
     }
 
     &.v-bottom {
@@ -129,14 +193,14 @@
       justify-content: flex-end;
     }
 
-    > .shrink-none {
+    > .f-s-n {
       -webkit-flex-shrink: 0;
       -moz-flex-shrink: 0;
       -ms-flex-shrink: 0;
       flex-shrink: 0;
     }
 
-    > .fill {
+    > .f-f {
       -webkit-flex-grow: 1;
       -moz-flex-grow: 1;
       -ms-flex-grow: 1;

src/less/core/wrapper/inline.less

@@ -0,0 +1,24 @@
+.bi-i {
+  white-space: nowrap;
+  &:after {
+    display: inline-block;
+    width: 0;
+    min-height: 100%;
+    vertical-align: middle;
+    content: ' ';
+  }
+
+  & > .i-item {
+    display: inline-block;
+
+    &.x-icon {
+      display: inline-block !important;
+    }
+  }
+
+  & > .bi-combo {
+    &.bi-combo-popup {
+      display: inline-block !important;
+    }
+  }
+}