update

4 years ago · 2f7a46f71e
5 changed files with 135 additions and 73 deletions
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@ -34,7 +34,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
        w.element.css({
            position: "relative"
        });
-        if (BI.contains([BI.HorizontalAlign.Left, BI.HorizontalAlign.Right, BI.HorizontalAlign.Center], o.horizontalAlign)) {
+        if (BI.contains([BI.HorizontalAlign.Left, BI.HorizontalAlign.Right], o.horizontalAlign)) {
            w.element.css({
                "flex-shrink": "0"
            });
--- a/src/less/core/wrapper/flex.horizontal.less
+++ b/src/less/core/wrapper/flex.horizontal.less
@ -1,10 +1,23 @@
-.bi-flex-horizontal-layout {
+.flex() {
  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+ */
+}
+
+.vertical() {
+  /* 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;
+}

+.horizontal() {
  /* 09版 */
  -webkit-box-orient: horizontal;
  /* 12版 */
@ -13,6 +26,12 @@
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
+}
+
+.bi-flex-horizontal-layout {
+  .flex();
+
+  .horizontal();

  /* 09版 */
  -webkit-box-pack: flex-start;
@ -20,12 +39,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;
+  -o-justify-content: flex-start;
  justify-content: flex-start;

  /* 09版 */
-  -webkit-box-align: start;
+  -webkit-box-align: flex-start;
  /* 12版 */
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
@ -101,14 +120,17 @@
  }

  &.h-stretch {
+    .vertical();
+
    /* 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;

    &.v-middle {
      /* 09版 */
@ -133,18 +155,5 @@
      -ms-flex-pack: flex-end;
      justify-content: 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;
  }
 }
--- a/src/less/core/wrapper/flex.vertical.less
+++ b/src/less/core/wrapper/flex.vertical.less
@ -1,10 +1,12 @@
-.bi-flex-vertical-layout {
+.flex() {
  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+ */
+}

+.vertical() {
  /* 09版 */
  -webkit-box-orient: vertical;
  /* 12版 */
@ -13,6 +15,22 @@
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
+}
+
+.horizontal() {
+  /* 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;
+}
+
+.bi-flex-vertical-layout {
+  .flex();
+  .vertical();

  /* 09版 */
  -webkit-box-pack: flex-start;
@ -20,12 +38,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;
+  -o-justify-content: flex-start;
  justify-content: flex-start;

  /* 09版 */
-  -webkit-box-align: start;
+  -webkit-box-align: flex-start;
  /* 12版 */
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
@ -101,14 +119,17 @@
  }

  &.v-stretch {
+    .horizontal();
+
    /* 09版 */
-    -webkit-box-orient: horizontal;
+    -webkit-box-align: stretch;
    /* 12版 */
-    -webkit-flex-direction: row;
-    -moz-flex-direction: row;
-    -ms-flex-direction: row;
-    -o-flex-direction: row;
-    flex-direction: row;
+    -webkit-align-items: stretch;
+    -moz-align-items: stretch;
+    -ms-align-items: stretch;
+    -ms-flex-align: stretch;
+    -o-align-items: stretch;
+    align-items: stretch;

    &.h-center {
      /* 09版 */
@ -133,18 +154,5 @@
      -o-justify-content: flex-end;
      justify-content: flex-end;
    }
-
-    &.h-stretch {
-    }
-
-    /* 09版 */
-    -webkit-box-align: stretch;
-    /* 12版 */
-    -webkit-align-items: stretch;
-    -moz-align-items: stretch;
-    -ms-align-items: stretch;
-    -ms-flex-align: stretch;
-    -o-align-items: stretch;
-    align-items: stretch;
  }
 }
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/src/less/core/wrapper/flex.wrapper.horizontal.less
@ -1,10 +1,23 @@
-.bi-flex-scrollable-horizontal-layout {
-  & .flex-scrollable-horizontal-layout-wrapper {
+.flex() {
  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+ */
+}
+
+.vertical() {
+  /* 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;
+}
+
+.horizontal() {
  /* 09版 */
  -webkit-box-orient: horizontal;
  /* 12版 */
@ -13,6 +26,12 @@
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
+}
+
+.bi-flex-scrollable-horizontal-layout {
+  & .flex-scrollable-horizontal-layout-wrapper {
+    .flex();
+    .horizontal();

    /* 09版 */
    -webkit-box-pack: flex-start;
@ -52,6 +71,7 @@
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
+      -ms-flex-align: center;
      -o-align-items: center;
      align-items: center;

@ -68,6 +88,7 @@
      -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;
    }
@ -79,6 +100,7 @@
      -webkit-align-items: stretch;
      -moz-align-items: stretch;
      -ms-align-items: stretch;
+      -ms-flex-align: stretch;
      -o-align-items: stretch;
      align-items: stretch;
    }
@ -90,8 +112,8 @@
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
-      -o-justify-content: center;
      -ms-flex-pack: center;
+      -o-justify-content: center;
      justify-content: center;
    }

@ -105,6 +127,8 @@
    }

    &.h-stretch {
+      .vertical();
+
      /* 09版 */
      -webkit-box-align: stretch;
      /* 12版 */
@ -134,7 +158,7 @@
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -ms-justify-content: flex-end;
-        -ms-flex-pack: flex-end;
+        -ms-flex-pack: end;
        -o-justify-content: flex-end;
        justify-content: flex-end;
      }
--- a/src/less/core/wrapper/flex.wrapper.vertical.less
+++ b/src/less/core/wrapper/flex.wrapper.vertical.less
@ -1,10 +1,12 @@
-.bi-flex-scrollable-vertical-layout {
-  & .flex-scrollable-vertical-layout-wrapper {
+.flex() {
  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+ */
+}
+
+.vertical() {
  /* 09版 */
  -webkit-box-orient: vertical;
  /* 12版 */
@ -13,6 +15,23 @@
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
+}
+
+.horizontal() {
+  /* 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;
+}
+
+.bi-flex-scrollable-vertical-layout {
+  & .flex-scrollable-vertical-layout-wrapper {
+    .flex();
+    .vertical();

    /* 09版 */
    -webkit-box-pack: flex-start;
@ -108,6 +127,8 @@
    }

    &.v-stretch {
+      .horizontal();
+
      /* 09版 */
      -webkit-box-align: stretch;
      /* 12版 */