From 5f55b3c3b6742713cd1bf9d8fd5752c10aef680b Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 29 Mar 2021 18:07:38 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wrapper/layout/flex/flex.horizontal.js | 6 ++ src/core/wrapper/layout/flex/flex.vertical.js | 6 ++ src/less/core/wrapper/flex.horizontal.less | 78 ++++++++++++------- src/less/core/wrapper/flex.vertical.less | 78 ++++++++++++------- .../core/wrapper/flex.wrapper.horizontal.less | 30 +++---- .../core/wrapper/flex.wrapper.vertical.less | 21 ++--- 6 files changed, 143 insertions(+), 76 deletions(-) diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index c0b2c5617..a618e3a59 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.js @@ -25,6 +25,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { BI.FlexHorizontalLayout.superclass.render.apply(this, arguments); var o = this.options; this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); + if (o.scrollable === true || o.scrollx === true) { + this.element.addClass("f-scroll-x"); + } + if (o.scrollable === true || o.scrolly === true) { + this.element.addClass("f-scroll-y"); + } this.populate(this.options.items); }, diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index b53915aa8..e78b4a103 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -24,6 +24,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { BI.FlexVerticalLayout.superclass.render.apply(this, arguments); var o = this.options; this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); + if (o.scrollable === true || o.scrollx === true) { + this.element.addClass("f-scroll-x"); + } + if (o.scrollable === true || o.scrolly === true) { + this.element.addClass("f-scroll-y"); + } this.populate(this.options.items); }, diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less index 54a96397c..5ad67aee9 100644 --- a/src/less/core/wrapper/flex.horizontal.less +++ b/src/less/core/wrapper/flex.horizontal.less @@ -63,18 +63,31 @@ flex-wrap: nowrap; &.v-middle { - ///* 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; - > .c-e { - margin-top: auto !important; - margin-bottom: auto !important; + /* 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; + + &.f-scroll-x { + /* 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; + + > .c-e { + margin-top: auto !important; + margin-bottom: auto !important; + } } } @@ -103,21 +116,34 @@ } &.h-center { - ///* 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; - > .f-c { - margin-left: auto !important; - } + /* 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; + + &.f-scroll-x { + /* 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; + + > .f-c { + margin-left: auto !important; + } - > .l-c { - margin-right: auto !important; + > .l-c { + margin-right: auto !important; + } } } diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less index e9446f931..1772deb9f 100644 --- a/src/less/core/wrapper/flex.vertical.less +++ b/src/less/core/wrapper/flex.vertical.less @@ -62,18 +62,31 @@ 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; - > .c-e { - margin-left: auto !important; - margin-right: auto !important; + /* 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; + + &.f-scroll-x { + /* 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; + + > .c-e { + margin-left: auto !important; + margin-right: auto !important; + } } } @@ -102,21 +115,34 @@ } &.v-middle { - ///* 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; - > .f-c { - margin-top: auto !important; - } + /* 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; + + &.f-scroll-y { + /* 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; + + > .f-c { + margin-top: auto !important; + } - > .l-c { - margin-bottom: auto !important; + > .l-c { + 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 6a6293f64..4c7b6029b 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -115,14 +115,15 @@ //-ms-flex-align: center; //-o-align-items: center; //align-items: center; - > .c-e { - margin-top: auto !important; - margin-bottom: auto !important; - } - - &.h-center { - min-width: 100%; - } + + //> .c-e { + // margin-top: auto !important; + // margin-bottom: auto !important; + //} + // + //&.h-center { + // min-width: 100%; + //} } &.v-bottom { @@ -163,13 +164,14 @@ //-ms-flex-pack: center; //-o-justify-content: center; //justify-content: center; - > .f-c { - margin-left: auto !important; - } - > .l-c { - margin-right: auto !important; - } + //> .f-c { + // margin-left: auto !important; + //} + // + //> .l-c { + // margin-right: auto !important; + //} } &.h-right { diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less index 54d5dddcf..7ad5f2d51 100644 --- a/src/less/core/wrapper/flex.wrapper.vertical.less +++ b/src/less/core/wrapper/flex.wrapper.vertical.less @@ -128,10 +128,10 @@ //-o-align-items: center; //align-items: center; - > .c-e { - margin-left: auto !important; - margin-right: auto !important; - } + //> .c-e { + // margin-left: auto !important; + // margin-right: auto !important; + //} } &.h-right { @@ -172,13 +172,14 @@ //-o-justify-content: center; //-ms-flex-pack: center; //justify-content: center; - > .f-c { - margin-top: auto !important; - } - > .l-c { - margin-bottom: auto !important; - } + //> .f-c { + // margin-top: auto !important; + //} + // + //> .l-c { + // margin-bottom: auto !important; + //} } &.v-bottom { From 1b5901b8c3b4f9808917395d9d8bc5c02d34ec31 Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 29 Mar 2021 18:17:28 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/wrapper/flex.wrapper.horizontal.less | 35 +++++++++++++++++-- .../core/wrapper/flex.wrapper.vertical.less | 29 +++++++++++++++ 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less index 4c7b6029b..6418929cd 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -31,6 +31,37 @@ .bi-f-s-h, .bi-flex-scrollable-horizontal-layout { .flex(); + .horizontal(); + + /* 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; + &.h-center { > .f-s-h-w { margin-left: auto !important; @@ -41,7 +72,7 @@ &.v-middle { > .f-s-h-w { margin-top: auto !important; - margin-right: auto !important; + margin-bottom: auto !important; } } @@ -103,7 +134,7 @@ -o-flex-wrap: nowrap; flex-wrap: nowrap; - min-height: 100%; + //min-height: 100%; &.v-middle { ///* 09版 */ diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less index 7ad5f2d51..e9ff07f65 100644 --- a/src/less/core/wrapper/flex.wrapper.vertical.less +++ b/src/less/core/wrapper/flex.wrapper.vertical.less @@ -32,6 +32,35 @@ .flex(); .vertical(); + /* 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; + &.h-center { > .f-s-v-w { margin-left: auto !important;