Browse Source

优化布局

es6
guy 3 years ago
parent
commit
c057a5f7fb
  1. 9
      src/core/wrapper/layout/flex/flex.horizontal.js
  2. 9
      src/core/wrapper/layout/flex/flex.vertical.js
  3. 6
      src/less/core/wrapper/flex.horizontal.less
  4. 6
      src/less/core/wrapper/flex.vertical.less

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

@ -35,7 +35,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
position: "relative" position: "relative"
}); });
if (o.columnSize[i] !== "auto") { if (o.columnSize[i] !== "auto") {
if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") { if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");
} else { } else {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
@ -47,6 +47,13 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
if (o.columnSize[i] === "fill") { if (o.columnSize[i] === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");
} }
w.element.addClass("c-e");
if (i === 0) {
w.element.addClass("f-c");
}
if (i === o.items.length - 1) {
w.element.addClass("l-c");
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit

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

@ -34,7 +34,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
position: "relative" position: "relative"
}); });
if (o.rowSize[i] !== "auto") { if (o.rowSize[i] !== "auto") {
if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") { if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");
} else { } else {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
@ -46,6 +46,13 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
if (o.rowSize[i] === "fill") { if (o.rowSize[i] === "fill") {
w.element.addClass("f-f"); w.element.addClass("f-f");
} }
w.element.addClass("c-e");
if (i === 0) {
w.element.addClass("f-c");
}
if (i === o.items.length - 1) {
w.element.addClass("l-c");
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit

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

@ -72,7 +72,7 @@
//-ms-flex-align: center; //-ms-flex-align: center;
//-o-align-items: center; //-o-align-items: center;
//align-items: center; //align-items: center;
> * { > .c-e {
margin-top: auto !important; margin-top: auto !important;
margin-bottom: auto !important; margin-bottom: auto !important;
} }
@ -112,11 +112,11 @@
//-ms-flex-pack: center; //-ms-flex-pack: center;
//-o-justify-content: center; //-o-justify-content: center;
//justify-content: center; //justify-content: center;
> *:first-child { > .f-c {
margin-left: auto !important; margin-left: auto !important;
} }
> *:last-child { > .l-c {
margin-right: auto !important; margin-right: auto !important;
} }
} }

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

@ -71,7 +71,7 @@
//-ms-flex-align: center; //-ms-flex-align: center;
//-o-align-items: center; //-o-align-items: center;
//align-items: center; //align-items: center;
> * { > .c-e {
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
} }
@ -111,11 +111,11 @@
//-ms-flex-pack: center; //-ms-flex-pack: center;
//-o-justify-content: center; //-o-justify-content: center;
//justify-content: center; //justify-content: center;
> *:first-child { > .f-c {
margin-left: auto !important; margin-left: auto !important;
} }
> *:last-child { > .l-c {
margin-right: auto !important; margin-right: auto !important;
} }
} }

Loading…
Cancel
Save