我正在学习flex-layout,并且我正在尝试创建响应式用户界面。 我有多年的自举网格系统经验,但我似乎无法理解如何完成以下任务(live demo):
在手机上:
如果我理解正确,我必须使用rows
和columns
的组合,如下面的代码
<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
<div fxFlex="25%"> ..code left out..</div>
<div fxFlex="25%"> ..code left out..</div>
<div fxFlex="25%"> ..code left out..</div>
<div fxFlex="25%"> ..code left out..</div>
</div>
在小屏幕上,布局从row
更改为column
,这意味着我已经为大型和移动监视器实现了上面的UI示例。
问题:如何为中型显示器实现用户界面(见上图)?我无法理解如何合并row
和column
答案 0 :(得分:4)
我将通过遍历项目数组来最小化您的代码。我将md的过渡从sm改为sm,而不是直接过渡到xs,但这是您的偏爱。我也在减去布局间隙(-0.5%)。
<div class="container" fxLayout="row" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
<ng-container *ngFor="let item of items">
<li
fxFlex="0 1 calc(25% - 0.5%)"
fxFlex.lt-md="0 1 calc(50% - 0.5%)"
fxFlex.lt-sm="100%">
</li>
</ng-container>
</div>
答案 1 :(得分:3)
您可以尝试这种方式:
.container { // for desktop & tablet
display: flex;
flex-flow: row wrap;
}
.container div {
width: 25%
}
@media for middle { // for tablet (mid)
.container div {
width: 50%
}
}
@media for mobile { //for mobile
.container {
flex-direction: column;
}
.container div {
width: 100%
}
}
希望它会有所帮助,对不太详细感到抱歉,但它只是一个灵活的快速提示。
由于