优化布局

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

@@ -25,6 +25,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },

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

@@ -25,6 +25,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
+        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },

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

@@ -112,11 +112,11 @@
     //-o-justify-content: center;
     //justify-content: center;
     > .f-c {
-      margin-left: auto !important;
+      margin-top: auto !important;
     }
 
     > .l-c {
-      margin-right: auto !important;
+      margin-bottom: auto !important;
     }
   }
 

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

@@ -31,6 +31,45 @@
 .bi-f-s-h, .bi-flex-scrollable-horizontal-layout {
   .flex();
 
+  &.h-center {
+    > .f-s-h-w {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+  }
+
+  &.v-middle {
+    > .f-s-h-w {
+      margin-top: auto !important;
+      margin-right: auto !important;
+    }
+  }
+
+  &.h-right {
+    /* 09版 */
+    -webkit-box-pack: flex-end;
+    /* 12版 */
+    -webkit-justify-content: flex-end;
+    -moz-justify-content: flex-end;
+    -ms-justify-content: flex-end;
+    -ms-flex-pack: end;
+    -o-justify-content: flex-end;
+    justify-content: flex-end;
+  }
+
+
+  &.v-bottom {
+    /* 09版 */
+    -webkit-box-align: flex-end;
+    /* 12版 */
+    -webkit-align-items: flex-end;
+    -moz-align-items: flex-end;
+    -ms-align-items: flex-end;
+    -ms-flex-align: end;
+    -o-align-items: flex-end;
+    align-items: flex-end;
+  }
+
   & .f-s-h-w, & .flex-scrollable-horizontal-layout-wrapper {
     .flex();
     .horizontal();

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

@@ -31,6 +31,44 @@
 .bi-f-s-v, .bi-flex-scrollable-vertical-layout {
   .flex();
 
+  &.h-center {
+    > .f-s-v-w {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+  }
+
+  &.v-middle {
+    > .f-s-v-w {
+      margin-top: auto !important;
+      margin-bottom: auto !important;
+    }
+  }
+
+  &.v-bottom {
+    /* 09版 */
+    -webkit-box-align: flex-end;
+    /* 12版 */
+    -webkit-align-items: flex-end;
+    -moz-align-items: flex-end;
+    -ms-align-items: flex-end;
+    -ms-flex-align: end;
+    -o-align-items: flex-end;
+    align-items: flex-end;
+  }
+
+  &.h-right {
+    /* 09版 */
+    -webkit-box-pack: flex-end;
+    /* 12版 */
+    -webkit-justify-content: flex-end;
+    -moz-justify-content: flex-end;
+    -ms-justify-content: flex-end;
+    -ms-flex-pack: end;
+    -o-justify-content: flex-end;
+    justify-content: flex-end;
+  }
+
   & .f-s-v-w, & .flex-scrollable-vertical-layout-wrapper {
     .flex();
     .vertical();
@@ -122,11 +160,11 @@
       //-ms-flex-pack: center;
       //justify-content: center;
       > .f-c {
-        margin-left: auto !important;
+        margin-top: auto !important;
       }
 
       > .l-c {
-        margin-right: auto !important;
+        margin-bottom: auto !important;
       }
     }