update

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"
             });

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;
+    -webkit-align-items: stretch;
-    -moz-flex-direction: column;
+    -moz-align-items: stretch;
-    -ms-flex-direction: column;
+    -ms-align-items: stretch;
-    -o-flex-direction: column;
+    -ms-flex-align: stretch;
-    flex-direction: column;
+    -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;
   }
 }

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;
+    -webkit-align-items: stretch;
-    -moz-flex-direction: row;
+    -moz-align-items: stretch;
-    -ms-flex-direction: row;
+    -ms-align-items: stretch;
-    -o-flex-direction: row;
+    -ms-flex-align: stretch;
-    flex-direction: row;
+    -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;
   }
 }

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

@@ -1,18 +1,37 @@
+.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版 */
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
+}
+
 .bi-flex-scrollable-horizontal-layout {
   & .flex-scrollable-horizontal-layout-wrapper {
-    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    .flex();
-    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    .horizontal();
-    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;
@@ -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;
       }

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

@@ -1,18 +1,37 @@
+.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版 */
+  -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 {
-    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    .flex();
-    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    .vertical();
-    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;
@@ -108,6 +127,8 @@
     }
 
     &.v-stretch {
+      .horizontal();
+
       /* 09版 */
       -webkit-box-align: stretch;
       /* 12版 */