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 2bf01cc06..8f4eec3f8 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/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("
").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
index baaacdb53..51e657d2a 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/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("
").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less
index fcbecd364..e9446f931 100644
--- a/src/less/core/wrapper/flex.vertical.less
+++ b/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;
}
}
diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less
index 0d81f46f8..2c080150d 100644
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/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();
diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less
index 67f1a460d..81673f99f 100644
--- a/src/less/core/wrapper/flex.wrapper.vertical.less
+++ b/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;
}
}