diff --git a/dist/2.0/fineui.css b/dist/2.0/fineui.css
index 1f1c45bddc..910e46dee5 100644
--- a/dist/2.0/fineui.css
+++ b/dist/2.0/fineui.css
@@ -1592,7 +1592,7 @@ textarea {
   box-sizing: content-box;
   /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
-.bi-flex-center-layout {
+.bi-flex-center-adapt-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1681,7 +1681,7 @@ textarea {
   -o-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
-.bi-flex-horizontal-layout.middle {
+.bi-flex-horizontal-layout.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1692,7 +1692,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-horizontal-layout.bottom {
+.bi-flex-horizontal-layout.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1703,8 +1703,47 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-horizontal-layout.v-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;
+}
+.bi-flex-horizontal-layout.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-vertical-center {
+.bi-flex-vertical-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1718,13 +1757,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1734,6 +1773,25 @@ textarea {
   -o-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  /* 09版 */
+  -webkit-box-align: 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+.bi-flex-vertical-layout.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1743,24 +1801,38 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-vertical-layout.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -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;
 }
-.bi-flex-vertical-center.stretch {
+.bi-flex-vertical-layout.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-vertical-layout.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 09版 */
   -webkit-box-pack: center;
   /* 12版 */
@@ -1781,7 +1853,7 @@ textarea {
   align-items: stretch;
 }
 
-.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
+.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1825,7 +1897,7 @@ textarea {
   float: left;
 }
 
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1874,7 +1946,7 @@ textarea {
   flex-wrap: nowrap;
   min-height: 100%;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1884,7 +1956,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1894,8 +1966,46 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1909,13 +2019,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1925,6 +2035,26 @@ textarea {
   -ms-flex-pack: start;
   -o-justify-content: flex-start;
   justify-content: flex-start;
+  /* 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  min-width: 100%;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1934,33 +2064,45 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  min-height: 100%;
-  float: left;
+  -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;
 }
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
-  width: 100%;
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 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;
   /* 09版 */
@@ -1969,6 +2111,7 @@ textarea {
   -webkit-align-items: stretch;
   -moz-align-items: stretch;
   -ms-align-items: stretch;
+  -ms-flex-align: stretch;
   -o-align-items: stretch;
   align-items: stretch;
 }
diff --git a/dist/2.0/fineui.ie.js b/dist/2.0/fineui.ie.js
index 5c645c1c72..7cf6d95ec2 100644
--- a/dist/2.0/fineui.ie.js
+++ b/dist/2.0/fineui.ie.js
@@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
@@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31366,7 +31429,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31539,7 +31725,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/dist/2.0/fineui.js b/dist/2.0/fineui.js
index 7dd50da700..db4a286ba7 100644
--- a/dist/2.0/fineui.js
+++ b/dist/2.0/fineui.js
@@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
@@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31366,7 +31429,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31539,7 +31725,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/dist/bundle.css b/dist/bundle.css
index 1f1c45bddc..910e46dee5 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -1592,7 +1592,7 @@ textarea {
   box-sizing: content-box;
   /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
-.bi-flex-center-layout {
+.bi-flex-center-adapt-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1681,7 +1681,7 @@ textarea {
   -o-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
-.bi-flex-horizontal-layout.middle {
+.bi-flex-horizontal-layout.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1692,7 +1692,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-horizontal-layout.bottom {
+.bi-flex-horizontal-layout.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1703,8 +1703,47 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-horizontal-layout.v-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;
+}
+.bi-flex-horizontal-layout.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-vertical-center {
+.bi-flex-vertical-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1718,13 +1757,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1734,6 +1773,25 @@ textarea {
   -o-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  /* 09版 */
+  -webkit-box-align: 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+.bi-flex-vertical-layout.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1743,24 +1801,38 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-vertical-layout.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -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;
 }
-.bi-flex-vertical-center.stretch {
+.bi-flex-vertical-layout.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-vertical-layout.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 09版 */
   -webkit-box-pack: center;
   /* 12版 */
@@ -1781,7 +1853,7 @@ textarea {
   align-items: stretch;
 }
 
-.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
+.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1825,7 +1897,7 @@ textarea {
   float: left;
 }
 
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1874,7 +1946,7 @@ textarea {
   flex-wrap: nowrap;
   min-height: 100%;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1884,7 +1956,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1894,8 +1966,46 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1909,13 +2019,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1925,6 +2035,26 @@ textarea {
   -ms-flex-pack: start;
   -o-justify-content: flex-start;
   justify-content: flex-start;
+  /* 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  min-width: 100%;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1934,33 +2064,45 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  min-height: 100%;
-  float: left;
+  -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;
 }
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
-  width: 100%;
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 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;
   /* 09版 */
@@ -1969,6 +2111,7 @@ textarea {
   -webkit-align-items: stretch;
   -moz-align-items: stretch;
   -ms-align-items: stretch;
+  -ms-flex-align: stretch;
   -o-align-items: stretch;
   align-items: stretch;
 }
diff --git a/dist/bundle.ie.js b/dist/bundle.ie.js
index 5c645c1c72..7cf6d95ec2 100644
--- a/dist/bundle.ie.js
+++ b/dist/bundle.ie.js
@@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
@@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31366,7 +31429,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31539,7 +31725,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/dist/bundle.js b/dist/bundle.js
index 7dd50da700..db4a286ba7 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
@@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31366,7 +31429,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31539,7 +31725,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/dist/core.css b/dist/core.css
index 6f38e293c4..952a289571 100644
--- a/dist/core.css
+++ b/dist/core.css
@@ -1592,7 +1592,7 @@ textarea {
   box-sizing: content-box;
   /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
-.bi-flex-center-layout {
+.bi-flex-center-adapt-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1681,7 +1681,7 @@ textarea {
   -o-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
-.bi-flex-horizontal-layout.middle {
+.bi-flex-horizontal-layout.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1692,7 +1692,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-horizontal-layout.bottom {
+.bi-flex-horizontal-layout.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1703,8 +1703,47 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-horizontal-layout.v-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;
+}
+.bi-flex-horizontal-layout.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-vertical-center {
+.bi-flex-vertical-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1718,13 +1757,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1734,6 +1773,25 @@ textarea {
   -o-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  /* 09版 */
+  -webkit-box-align: 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+.bi-flex-vertical-layout.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1743,24 +1801,38 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-vertical-layout.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -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;
 }
-.bi-flex-vertical-center.stretch {
+.bi-flex-vertical-layout.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-vertical-layout.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 09版 */
   -webkit-box-pack: center;
   /* 12版 */
@@ -1781,7 +1853,7 @@ textarea {
   align-items: stretch;
 }
 
-.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
+.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1825,7 +1897,7 @@ textarea {
   float: left;
 }
 
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1874,7 +1946,7 @@ textarea {
   flex-wrap: nowrap;
   min-height: 100%;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1884,7 +1956,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1894,8 +1966,46 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1909,13 +2019,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1925,6 +2035,26 @@ textarea {
   -ms-flex-pack: start;
   -o-justify-content: flex-start;
   justify-content: flex-start;
+  /* 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  min-width: 100%;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1934,33 +2064,45 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  min-height: 100%;
-  float: left;
+  -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;
 }
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
-  width: 100%;
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 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;
   /* 09版 */
@@ -1969,6 +2111,7 @@ textarea {
   -webkit-align-items: stretch;
   -moz-align-items: stretch;
   -ms-align-items: stretch;
+  -ms-flex-align: stretch;
   -o-align-items: stretch;
   align-items: stretch;
 }
diff --git a/dist/core.js b/dist/core.js
index cfde01355c..c727b3316f 100644
--- a/dist/core.js
+++ b/dist/core.js
@@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
@@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31366,7 +31429,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31539,7 +31725,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31565,28 +31751,28 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31596,24 +31782,82 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/dist/core_without_normalize.css b/dist/core_without_normalize.css
index 38196aadf5..ae5126d2d1 100644
--- a/dist/core_without_normalize.css
+++ b/dist/core_without_normalize.css
@@ -1311,7 +1311,7 @@ textarea {
   box-sizing: content-box;
   /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
-.bi-flex-center-layout {
+.bi-flex-center-adapt-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1400,7 +1400,7 @@ textarea {
   -o-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
-.bi-flex-horizontal-layout.middle {
+.bi-flex-horizontal-layout.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1411,7 +1411,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-horizontal-layout.bottom {
+.bi-flex-horizontal-layout.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1422,8 +1422,47 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-horizontal-layout.v-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;
+}
+.bi-flex-horizontal-layout.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-vertical-center {
+.bi-flex-vertical-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1437,13 +1476,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1453,6 +1492,25 @@ textarea {
   -o-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  /* 09版 */
+  -webkit-box-align: 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+.bi-flex-vertical-layout.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1462,24 +1520,38 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-vertical-layout.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -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;
 }
-.bi-flex-vertical-center.stretch {
+.bi-flex-vertical-layout.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-vertical-layout.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 09版 */
   -webkit-box-pack: center;
   /* 12版 */
@@ -1500,7 +1572,7 @@ textarea {
   align-items: stretch;
 }
 
-.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
+.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1544,7 +1616,7 @@ textarea {
   float: left;
 }
 
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1593,7 +1665,7 @@ textarea {
   flex-wrap: nowrap;
   min-height: 100%;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1603,7 +1675,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1613,8 +1685,46 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1628,13 +1738,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1644,6 +1754,26 @@ textarea {
   -ms-flex-pack: start;
   -o-justify-content: flex-start;
   justify-content: flex-start;
+  /* 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  min-width: 100%;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1653,33 +1783,45 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  min-height: 100%;
-  float: left;
+  -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;
 }
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
-  width: 100%;
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 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;
   /* 09版 */
@@ -1688,6 +1830,7 @@ textarea {
   -webkit-align-items: stretch;
   -moz-align-items: stretch;
   -ms-align-items: stretch;
+  -ms-flex-align: stretch;
   -o-align-items: stretch;
   align-items: stretch;
 }
diff --git a/dist/fineui.css b/dist/fineui.css
index d69330f6d6..26d5cd0343 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -1592,7 +1592,7 @@ textarea {
   box-sizing: content-box;
   /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
-.bi-flex-center-layout {
+.bi-flex-center-adapt-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1681,7 +1681,7 @@ textarea {
   -o-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
-.bi-flex-horizontal-layout.middle {
+.bi-flex-horizontal-layout.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1692,7 +1692,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-horizontal-layout.bottom {
+.bi-flex-horizontal-layout.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1703,8 +1703,47 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-horizontal-layout.v-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;
+}
+.bi-flex-horizontal-layout.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-vertical-center {
+.bi-flex-vertical-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1718,13 +1757,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1734,6 +1773,25 @@ textarea {
   -o-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  /* 09版 */
+  -webkit-box-align: 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+.bi-flex-vertical-layout.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1743,24 +1801,38 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-vertical-layout.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -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;
 }
-.bi-flex-vertical-center.stretch {
+.bi-flex-vertical-layout.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-vertical-layout.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 09版 */
   -webkit-box-pack: center;
   /* 12版 */
@@ -1781,7 +1853,7 @@ textarea {
   align-items: stretch;
 }
 
-.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
+.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1825,7 +1897,7 @@ textarea {
   float: left;
 }
 
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1874,7 +1946,7 @@ textarea {
   flex-wrap: nowrap;
   min-height: 100%;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1884,7 +1956,7 @@ textarea {
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -1894,8 +1966,46 @@ textarea {
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -1909,13 +2019,13 @@ textarea {
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -1925,6 +2035,26 @@ textarea {
   -ms-flex-pack: start;
   -o-justify-content: flex-start;
   justify-content: flex-start;
+  /* 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  min-width: 100%;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -1934,33 +2064,45 @@ textarea {
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  min-height: 100%;
-  float: left;
+  -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;
 }
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
-  width: 100%;
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 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;
   /* 09版 */
@@ -1969,6 +2111,7 @@ textarea {
   -webkit-align-items: stretch;
   -moz-align-items: stretch;
   -ms-align-items: stretch;
+  -ms-flex-align: stretch;
   -o-align-items: stretch;
   align-items: stretch;
 }
diff --git a/dist/fineui.ie.js b/dist/fineui.ie.js
index 129c0f80b4..26873899ee 100644
--- a/dist/fineui.ie.js
+++ b/dist/fineui.ie.js
@@ -19403,12 +19403,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -19419,12 +19419,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -19436,12 +19436,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
@@ -31547,7 +31547,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -31563,7 +31563,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31571,7 +31571,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31583,6 +31636,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -31596,14 +31650,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31611,7 +31674,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31646,9 +31709,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31658,24 +31722,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31692,15 +31819,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31710,12 +31837,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31736,7 +31863,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31744,20 +31871,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31767,16 +31947,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31784,7 +31970,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31810,28 +31996,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31841,24 +32079,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31884,15 +32128,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/dist/fineui.js b/dist/fineui.js
index b22fec13ae..959334e99e 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -19403,12 +19403,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -19419,12 +19419,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -19436,12 +19436,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
@@ -31547,7 +31547,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -31563,7 +31563,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31571,7 +31571,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31583,6 +31636,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -31596,14 +31650,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31611,7 +31674,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31646,9 +31709,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31658,24 +31722,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31692,15 +31819,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -31710,12 +31837,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31736,7 +31863,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -31744,20 +31871,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31767,16 +31947,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -31784,7 +31970,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31810,28 +31996,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31841,24 +32079,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -31884,15 +32128,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/dist/fineui_without_jquery_polyfill.js b/dist/fineui_without_jquery_polyfill.js
index e7b13bbc5d..8400ba9448 100644
--- a/dist/fineui_without_jquery_polyfill.js
+++ b/dist/fineui_without_jquery_polyfill.js
@@ -20228,7 +20228,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -20244,7 +20244,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -20252,7 +20252,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -20264,6 +20317,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -20277,14 +20331,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -20292,7 +20355,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -20327,9 +20390,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -20339,24 +20403,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.horizontalAlign);
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -20373,15 +20500,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -20391,12 +20518,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -20417,7 +20544,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -20425,20 +20552,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -20448,16 +20628,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -20465,7 +20651,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -20491,28 +20677,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -20522,24 +20760,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
+                "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
             });
         }
         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) +"px"
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -20565,15 +20809,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_wrapper_vertical布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
  * 固定子组件上下左右的布局容器
  * @class BI.AbsoluteLayout
  * @extends BI.Layout
diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js
index 8562254237..9d504aae9a 100644
--- a/src/core/platform/web/config.js
+++ b/src/core/platform/web/config.js
@@ -47,12 +47,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
         if (!isIE && supportFlex && justOneItem) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend(ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         // 一个item的情况下inline布局睥睨天下
         if(justOneItem) {
@@ -63,12 +63,12 @@ BI.prepares.push(function () {
     BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex();
         if (!isIE && supportFlex) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
+                // 不是IE用flex__scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_vertical_center"});
+            return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
     });
@@ -80,12 +80,12 @@ BI.prepares.push(function () {
     });
     BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            // 有滚动条的情况下需要用到flex_wrapper_center布局
+            // 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
             if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
-                // 不是IE用flex_wrapper_center布局
-                return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
+                // 不是IE用flex_scrollable_center_adapt布局
+                return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
             }
-            return BI.extend(ob, {type: "bi.flex_center"});
+            return BI.extend(ob, {type: "bi.flex_center_adapt"});
         }
         return BI.extend(ob, {type: "bi.inline_center_adapt"});
     });
diff --git a/src/core/wrapper/layout/flex/flex.center.js b/src/core/wrapper/layout/flex/flex.center.js
index fd6080f386..f6073505e3 100644
--- a/src/core/wrapper/layout/flex/flex.center.js
+++ b/src/core/wrapper/layout/flex/flex.center.js
@@ -8,7 +8,7 @@
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-layout"
+            baseCls: "bi-flex-center-adapt-layout"
         });
     },
     render: function () {
@@ -24,7 +24,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -32,4 +32,4 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_center", BI.FlexCenterLayout);
\ No newline at end of file
+BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.center.js b/src/core/wrapper/layout/flex/flex.horizontal.center.js
new file mode 100644
index 0000000000..52b6557f7c
--- /dev/null
+++ b/src/core/wrapper/layout/flex/flex.horizontal.center.js
@@ -0,0 +1,54 @@
+/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexHorizontalCenter
+ * @extends BI.Layout
+ */
+BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: false,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    resize: function () {
+        // console.log("flex_vertical_center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        self.populate(items);
+    }
+});
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
+BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index 03358a3f0b..3dad00eb9d 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -10,6 +10,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -23,14 +24,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.element.addClass(o.verticalAlign);
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
         var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "0"});
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -38,7 +48,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
diff --git a/src/core/wrapper/layout/flex/flex.vertical.center.js b/src/core/wrapper/layout/flex/flex.vertical.center.js
index f67c3c40f5..3827ba9f64 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.center.js
@@ -8,9 +8,10 @@
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center",
+            baseCls: "bi-flex-vertical-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -20,46 +21,35 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
-        var o = this.options;
-        this.element.addClass(o.horizontalAlign);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", "flex-shrink": "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) + "px"
-            });
-        }
-        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) +"px"
-            });
-        }
-        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) + "px"
-            });
-        }
-        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) + "px"
-            });
-        }
-        return w;
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
     },
 
     resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        // console.log("flex_vertical_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
-        this._mount();
+        self.populate(items);
     }
 });
-BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);
\ No newline at end of file
+BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
+BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
new file mode 100644
index 0000000000..59fc6fbb86
--- /dev/null
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -0,0 +1,75 @@
+/**
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-vertical-layout",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
+        var o = this.options;
+        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
+        this.populate(this.options.items);
+    },
+
+    _addElement: function (i, item) {
+        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
+        var o = this.options;
+        w.element.css({
+            position: "relative",
+            "flex-shrink": "0"
+        });
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
+        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) + "px"
+            });
+        }
+        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        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) + "px"
+            });
+        }
+        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) + "px"
+            });
+        }
+        return w;
+    },
+
+    resize: function () {
+        // console.log("flex_vertical布局不需要resize");
+    },
+
+    populate: function (items) {
+        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
+        this._mount();
+    }
+});
+BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
index a5f34ad716..1225a1e1af 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
@@ -8,12 +8,12 @@
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-center-layout clearfix"
+            baseCls: "bi-flex-scrollable-center-layout clearfix"
         });
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -34,7 +34,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_center布局不需要resize");
+        // console.log("flex_center_adapt布局不需要resize");
     },
 
     populate: function (items) {
@@ -42,4 +42,4 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);
\ No newline at end of file
+BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
new file mode 100644
index 0000000000..d37c8ecb99
--- /dev/null
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
@@ -0,0 +1,52 @@
+/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexVerticalCenter
+ * @extends BI.Layout
+ */
+BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_vertical",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
+    },
+
+    populate: function (items) {
+        this.wrapper.populate(items);
+    }
+});
+BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
+BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);
\ No newline at end of file
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 a46ab363d6..d47d1a7459 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -5,13 +5,15 @@
  * @class BI.FlexHorizontalLayout
  * @extends BI.Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
+BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: BI.VerticalAlign.Middle,
+        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollable: null,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -21,16 +23,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
     _addElement: function (i, item) {
         var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative"});
+        if (o.columnSize[i] > 0) {
+            w.element.width(o.columnSize[i]);
+        }
+        if (o.columnSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
         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) + "px"
@@ -38,7 +46,7 @@ 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) +"px"
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
             });
         }
         if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@@ -64,12 +72,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
 
     resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
+        // console.log("flex_wrapper_horizontal布局不需要resize");
     },
 
     populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
         this._mount();
     }
 });
-BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);
\ No newline at end of file
+BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
index 9bab56711f..e378d2d086 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
@@ -5,13 +5,13 @@
  * @class BI.FlexVerticalCenter
  * @extends BI.Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
+BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-wrapper-vertical-center clearfix",
-            horizontalAlign: BI.HorizontalAlign.Middle,
+        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            // scrollable: true,
+            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -21,55 +21,31 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
-        var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative"});
-        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) + "px"
-            });
-        }
-        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) +"px"
-            });
-        }
-        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) + "px"
-            });
-        }
-        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) + "px"
-            });
-        }
-        return w;
-    },
-
-    appendFragment: function (frag) {
-        this.$wrapper.append(frag);
-        this.element.append(this.$wrapper);
-    },
-
-    _getWrapper: function () {
-        return this.$wrapper;
-    },
-
-    resize: function () {
-        // console.log("flex_vertical_center布局不需要resize");
+        var self = this, o = this.options;
+        return {
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
+            },
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: o.horizontalAlign,
+            columnSize: o.columnSize,
+            scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            items: o.items
+        };
     },
 
     populate: function (items) {
-        BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
-        this._mount();
+        this.wrapper.populate(items);
     }
 });
-BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);
\ No newline at end of file
+BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
+BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
new file mode 100644
index 0000000000..7e2dc37737
--- /dev/null
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@@ -0,0 +1,83 @@
+/**
+ *自适应水平和垂直方向都居中容器
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.FlexWrapperVerticalLayout
+ * @extends BI.Layout
+ */
+BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Top,
+            rowSize: [],
+            scrollable: null,
+            scrolly: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
+        var o = this.options;
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
+        this.populate(this.options.items);
+    },
+
+    _addElement: function (i, item) {
+        var o = this.options;
+        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
+        w.element.css({position: "relative"});
+        if (o.rowSize[i] > 0) {
+            w.element.height(o.rowSize[i]);
+        }
+        if (o.rowSize[i] === "fill") {
+            w.element.css("flex", "1");
+        }
+        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) + "px"
+            });
+        }
+        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        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) + "px"
+            });
+        }
+        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) + "px"
+            });
+        }
+        return w;
+    },
+
+    appendFragment: function (frag) {
+        this.$wrapper.append(frag);
+        this.element.append(this.$wrapper);
+    },
+
+    _getWrapper: function () {
+        return this.$wrapper;
+    },
+
+    resize: function () {
+        // console.log("flex_wrapper_vertical布局不需要resize");
+    },
+
+    populate: function (items) {
+        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
+        this._mount();
+    }
+});
+BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);
\ No newline at end of file
diff --git a/src/css/core/wrapper/flex.css b/src/css/core/wrapper/flex.css
index 9a7e072f0e..ba1216ee57 100644
--- a/src/css/core/wrapper/flex.css
+++ b/src/css/core/wrapper/flex.css
@@ -1,4 +1,4 @@
-.bi-flex-center-layout {
+.bi-flex-center-adapt-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -87,7 +87,7 @@
   -o-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
-.bi-flex-horizontal-layout.middle {
+.bi-flex-horizontal-layout.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -98,7 +98,7 @@
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-horizontal-layout.bottom {
+.bi-flex-horizontal-layout.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -109,8 +109,47 @@
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-horizontal-layout.v-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;
+}
+.bi-flex-horizontal-layout.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-vertical-center {
+.bi-flex-vertical-layout {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -124,13 +163,13 @@
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -140,6 +179,25 @@
   -o-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  /* 09版 */
+  -webkit-box-align: 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+.bi-flex-vertical-layout.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -149,24 +207,38 @@
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-vertical-layout.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -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;
 }
-.bi-flex-vertical-center.stretch {
+.bi-flex-vertical-layout.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-vertical-layout.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 09版 */
   -webkit-box-pack: center;
   /* 12版 */
@@ -187,7 +259,7 @@
   align-items: stretch;
 }
 
-.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
+.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -231,7 +303,7 @@
   float: left;
 }
 
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -280,7 +352,7 @@
   flex-wrap: nowrap;
   min-height: 100%;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -290,7 +362,7 @@
   -o-align-items: center;
   align-items: center;
 }
-.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
   /* 09版 */
   -webkit-box-align: flex-end;
   /* 12版 */
@@ -300,8 +372,46 @@
   -o-align-items: flex-end;
   align-items: flex-end;
 }
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 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;
+  /* 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;
+}
 
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
   display: box;
   /* OLD - Android 4.4- */
   display: -webkit-box;
@@ -315,13 +425,13 @@
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   /* 09版 */
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
   /* 09版 */
   -webkit-box-pack: flex-start;
   /* 12版 */
@@ -331,6 +441,26 @@
   -ms-flex-pack: start;
   -o-justify-content: flex-start;
   justify-content: flex-start;
+  /* 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;
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  min-width: 100%;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
   /* 09版 */
   -webkit-box-align: center;
   /* 12版 */
@@ -340,33 +470,45 @@
   -ms-flex-align: center;
   -o-align-items: center;
   align-items: center;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
   /* 09版 */
-  /*-webkit-box-lines: multiple;*/
+  -webkit-box-align: flex-end;
   /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  min-height: 100%;
-  float: left;
+  -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;
 }
-.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
-  width: 100%;
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
   /* 09版 */
-  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
   /* 12版 */
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  -o-flex-direction: column;
-  flex-direction: column;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
+.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
+  /* 09版 */
+  -webkit-box-orient: horizontal;
+  /* 12版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
   /* 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;
   /* 09版 */
@@ -375,6 +517,7 @@
   -webkit-align-items: stretch;
   -moz-align-items: stretch;
   -ms-align-items: stretch;
+  -ms-flex-align: stretch;
   -o-align-items: stretch;
   align-items: stretch;
 }
diff --git a/src/less/core/wrapper/flex.center.less b/src/less/core/wrapper/flex.center.less
index 279e6ff431..4fef2365df 100644
--- a/src/less/core/wrapper/flex.center.less
+++ b/src/less/core/wrapper/flex.center.less
@@ -1,4 +1,4 @@
-.bi-flex-center-layout {
+.bi-flex-center-adapt-layout {
   display: box; /* OLD - Android 4.4- */
   display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less
index b348d7b2f7..c475776890 100644
--- a/src/less/core/wrapper/flex.horizontal.less
+++ b/src/less/core/wrapper/flex.horizontal.less
@@ -44,7 +44,7 @@
   -o-flex-wrap: nowrap;
   flex-wrap: nowrap;
 
-  &.middle {
+  &.v-middle {
     /* 09版 */
     -webkit-box-align: center;
     /* 12版 */
@@ -55,7 +55,7 @@
     -o-align-items: center;
     align-items: center;
   }
-  &.bottom {
+  &.v-bottom {
     /* 09版 */
     -webkit-box-align: flex-end;
     /* 12版 */
@@ -66,4 +66,45 @@
     -o-align-items: flex-end;
     align-items: flex-end;
   }
+  &.v-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;
+  }
+
+  &.h-stretch {
+    /* 09版 */
+    -webkit-box-orient: vertical;
+    /* 12版 */
+    -webkit-flex-direction: column;
+    -moz-flex-direction: column;
+    -ms-flex-direction: column;
+    -o-flex-direction: column;
+    flex-direction: column;
+
+    /* 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;
+    /* 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;
+  }
 }
\ No newline at end of file
diff --git a/src/less/core/wrapper/flex.vertical.center.less b/src/less/core/wrapper/flex.vertical.center.less
deleted file mode 100644
index 06954878a5..0000000000
--- a/src/less/core/wrapper/flex.vertical.center.less
+++ /dev/null
@@ -1,76 +0,0 @@
-.bi-flex-vertical-center {
-  display: box; /* OLD - Android 4.4- */
-  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox; /* TWEENER - IE 10 */
-  display: -webkit-flex; /* NEW - Chrome */
-  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-
-  /* 09版 */
-  -webkit-box-orient: horizontal;
-  /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
-
-  /* 09版 */
-  -webkit-box-pack: flex-start;
-  /* 12版 */
-  -webkit-justify-content: flex-start;
-  -moz-justify-content: flex-start;
-  -ms-justify-content: flex-start;
-  -o-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-
-  /* 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;
-
-  /* 09版 */
-  /*-webkit-box-lines: multiple;*/
-  /* 12版 */
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -o-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-
-  &.stretch {
-    /* 09版 */
-    -webkit-box-orient: vertical;
-    /* 12版 */
-    -webkit-flex-direction: column;
-    -moz-flex-direction: column;
-    -ms-flex-direction: column;
-    -o-flex-direction: column;
-    flex-direction: column;
-
-    /* 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;
-    /* 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;
-  }
-}
\ No newline at end of file
diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less
new file mode 100644
index 0000000000..2bbe8f7ff9
--- /dev/null
+++ b/src/less/core/wrapper/flex.vertical.less
@@ -0,0 +1,110 @@
+.bi-flex-vertical-layout {
+  display: box; /* OLD - Android 4.4- */
+  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox; /* TWEENER - IE 10 */
+  display: -webkit-flex; /* NEW - Chrome */
+  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
+
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+
+  /* 09版 */
+  -webkit-box-pack: flex-start;
+  /* 12版 */
+  -webkit-justify-content: flex-start;
+  -moz-justify-content: flex-start;
+  -ms-justify-content: flex-start;
+  -o-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+
+  /* 09版 */
+  -webkit-box-align: 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;
+
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  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;
+  }
+  &.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;
+  }
+  &.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;
+  }
+
+  &.v-stretch {
+    /* 09版 */
+    -webkit-box-orient: horizontal;
+    /* 12版 */
+    -webkit-flex-direction: row;
+    -moz-flex-direction: row;
+    -ms-flex-direction: row;
+    -o-flex-direction: row;
+    flex-direction: row;
+
+    /* 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;
+    /* 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;
+  }
+}
\ No newline at end of file
diff --git a/src/less/core/wrapper/flex.wrapper.center.less b/src/less/core/wrapper/flex.wrapper.center.less
index 460fcc88e1..913acb8bf5 100644
--- a/src/less/core/wrapper/flex.wrapper.center.less
+++ b/src/less/core/wrapper/flex.wrapper.center.less
@@ -1,5 +1,5 @@
-.bi-flex-wrapper-center-layout {
-  & .flex-wrapper-center-layout-wrapper {
+.bi-flex-scrollable-center-adapt-layout {
+  & .flex-scrollable-center-adapt-layout-wrapper {
     display: box; /* OLD - Android 4.4- */
     display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
     display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less
index 592f23d47b..f53f95c64b 100644
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/src/less/core/wrapper/flex.wrapper.horizontal.less
@@ -1,5 +1,5 @@
-.bi-flex-wrapper-horizontal-layout {
-  & .flex-wrapper-horizontal-layout-wrapper {
+.bi-flex-scrollable-horizontal-layout {
+  & .flex-scrollable-horizontal-layout-wrapper {
     display: box; /* OLD - Android 4.4- */
     display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
     display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
@@ -46,7 +46,7 @@
 
     min-height: 100%;
 
-    &.middle {
+    &.v-middle {
       /* 09版 */
       -webkit-box-align: center;
       /* 12版 */
@@ -56,7 +56,7 @@
       -o-align-items: center;
       align-items: center;
     }
-    &.bottom {
+    &.v-bottom {
       /* 09版 */
       -webkit-box-align: flex-end;
       /* 12版 */
@@ -66,5 +66,44 @@
       -o-align-items: flex-end;
       align-items: flex-end;
     }
+    &.v-stretch {
+      /* 09版 */
+      -webkit-box-align: stretch;
+      /* 12版 */
+      -webkit-align-items: stretch;
+      -moz-align-items: stretch;
+      -ms-align-items: stretch;
+      -o-align-items: stretch;
+      align-items: stretch;
+    }
+    &.h-stretch {
+      /* 09版 */
+      -webkit-box-orient: vertical;
+      /* 12版 */
+      -webkit-flex-direction: column;
+      -moz-flex-direction: column;
+      -ms-flex-direction: column;
+      -o-flex-direction: column;
+      flex-direction: column;
+
+      /* 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;
+      /* 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;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/less/core/wrapper/flex.wrapper.vertical.center.less b/src/less/core/wrapper/flex.wrapper.vertical.center.less
deleted file mode 100644
index 67221e625a..0000000000
--- a/src/less/core/wrapper/flex.wrapper.vertical.center.less
+++ /dev/null
@@ -1,80 +0,0 @@
-.bi-flex-wrapper-vertical-center {
-  & .flex-wrapper-vertical-center-wrapper {
-    display: box; /* OLD - Android 4.4- */
-    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -ms-flexbox; /* TWEENER - IE 10 */
-    display: -webkit-flex; /* NEW - Chrome */
-    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-
-    /* 09版 */
-    -webkit-box-orient: horizontal;
-    /* 12版 */
-    -webkit-flex-direction: row;
-    -moz-flex-direction: row;
-    -ms-flex-direction: row;
-    -o-flex-direction: row;
-    flex-direction: row;
-
-    /* 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;
-
-    /* 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;
-
-    /* 09版 */
-    /*-webkit-box-lines: multiple;*/
-    /* 12版 */
-    -webkit-flex-wrap: nowrap;
-    -moz-flex-wrap: nowrap;
-    -ms-flex-wrap: nowrap;
-    -o-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-
-    min-height: 100%;
-    float: left;
-
-    &.stretch {
-      width: 100%;
-      /* 09版 */
-      -webkit-box-orient: vertical;
-      /* 12版 */
-      -webkit-flex-direction: column;
-      -moz-flex-direction: column;
-      -ms-flex-direction: column;
-      -o-flex-direction: column;
-      flex-direction: column;
-
-      /* 09版 */
-      -webkit-box-pack: center;
-      /* 12版 */
-      -webkit-justify-content: center;
-      -moz-justify-content: center;
-      -ms-justify-content: center;
-      -o-justify-content: center;
-      justify-content: center;
-      /* 09版 */
-      -webkit-box-align: stretch;
-      /* 12版 */
-      -webkit-align-items: stretch;
-      -moz-align-items: stretch;
-      -ms-align-items: stretch;
-      -o-align-items: stretch;
-      align-items: stretch;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less
new file mode 100644
index 0000000000..c698d48329
--- /dev/null
+++ b/src/less/core/wrapper/flex.wrapper.vertical.less
@@ -0,0 +1,113 @@
+.bi-flex-scrollable-vertical-layout {
+  & .flex-scrollable-vertical-layout-wrapper {
+    display: box; /* OLD - Android 4.4- */
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -ms-flexbox; /* TWEENER - IE 10 */
+    display: -webkit-flex; /* NEW - Chrome */
+    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    /* 09版 */
+    -webkit-box-orient: vertical;
+    /* 12版 */
+    -webkit-flex-direction: column;
+    -moz-flex-direction: column;
+    -ms-flex-direction: column;
+    -o-flex-direction: column;
+    flex-direction: column;
+
+    /* 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;
+
+    /* 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;
+
+    /* 09版 */
+    /*-webkit-box-lines: multiple;*/
+    /* 12版 */
+    -webkit-flex-wrap: nowrap;
+    -moz-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    -o-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+
+    min-width: 100%;
+
+    &.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;
+    }
+    &.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;
+    }
+    &.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;
+    }
+
+    &.v-stretch {
+      /* 09版 */
+      -webkit-box-orient: horizontal;
+      /* 12版 */
+      -webkit-flex-direction: row;
+      -moz-flex-direction: row;
+      -ms-flex-direction: row;
+      -o-flex-direction: row;
+      flex-direction: row;
+
+      /* 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;
+      /* 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;
+    }
+  }
+}
\ No newline at end of file