我正在使用@angular/flex-layout创建一个网络应用程序。
当屏幕小于 600px ( xs
) 时,我尝试左右留出 5% 的边距。它在较大的屏幕上正常工作(当有fxLayout="row"
-layout 时),但在xs
and - 情况下不能fxLayout="column"
正常工作。
问题:如何使div
's 不填充右侧的剩余空间,而是使它们仅占 90%,左右偏移 5%?
我正在使用@angular/flex-layout创建一个网络应用程序。
当屏幕小于 600px ( xs
) 时,我尝试左右留出 5% 的边距。它在较大的屏幕上正常工作(当有fxLayout="row"
-layout 时),但在xs
and - 情况下不能fxLayout="column"
正常工作。
问题:如何使div
's 不填充右侧的剩余空间,而是使它们仅占 90%,左右偏移 5%?
最后,我使用了与@Nehal 类似的方法,但ngStyle.xs
我没有使用ngClass.xs
它并让它正常工作。
<div fxLayout.xs="column"
fxLayout.gt-xs="row"
fxFlex.xs="grow"
fxFlex.gt-xs="grow">
<div ngClass.xs="section-title-xs-margin"
fxFlex.xs="90"
fxFlex.gt-xs="25"
fxFlex.gt-sm="20"
fxFlexOffset.xs="5"
fxFlexOffset.gt-xs="5"
fxFlexOffset.gt-sm="10">
Left / Top
</div>
<div ngClass.xs="content-xs-margin"
fxFlex.xs="90"
fxFlex.gt-xs="63"
fxFlex.gt-sm="55"
fxFlexOffset.xs="5"
fxFlexOffset.gt-xs="2"
fxFlexOffset.gt-sm="5">
Right / Bottom
</div>
</div>
在 CSS 中:
.section-title-xs-margin {
margin-right: 5%;
}
.content-xs-margin {
margin-right: 5%;
}
我编辑了你的 plunker 并让它使用[ngStyle.xs]
.
代码:
@Component({
selector: 'test-app',
template: `
<div fxLayout.xs="column"
fxLayout.gt-xs="row"
class="containerX"
[ngStyle.xs]="{'width.%': 90, 'margin-left.%': 5, 'margin-right.%': 5}"
style="background-color: grey">
<div style="background-color: blue"
fxFlex.xs="90"
fxFlex.gt-xs="25"
fxFlex.gt-sm="20"
fxFlexOffset="5"
fxFlexOffset.gt-xs="5"
fxFlexOffset.gt-sm="10">
Left / Top
</div>
<div style="background-color: red"
fxFlex.xs="90"
fxFlex.gt-xs="63"
fxFlex.gt-sm="55"
fxFlexOffset="5"
fxFlexOffset.gt-xs="2"
fxFlexOffset.gt-sm="5">
Right / Bottom
</div>
</div>
`,
styles: [`
.containerX {
border: solid 1px #b6b6b6;
background: skyblue;
height: 200px;
width: 100%;
}`
]
})
export class TestApp {
}
希望这可以帮助!