Angular中如何用fxLayout实现元素自适应屏幕换行？

我之前也碰到过一模一样的需求！你现在的情况是想用Angular Flex Layout实现数组元素换行展示，希望每行的元素数量能跟着屏幕尺寸动态变化（比如11个元素时首行5个、第二行5个、第三行1个），但目前只有极小屏幕才会改变每行元素数，对吧？

问题出在哪？ #

你现有的代码里只给mat-card加了基础的fxFlex，没有配置响应式的断点参数。这就导致Flex Layout只会在屏幕窄到极限时才触发换行，没法根据不同的屏幕宽度自动调整每行能容纳的元素数量。

解决方案：给fxFlex添加响应式断点配置 #

只需要给mat-card的fxFlex设置不同屏幕尺寸下的宽度占比，就能让每行元素数量随屏幕动态变化了。修改后的完整代码如下：

<div class="boards" fxLayout="row" fxLayoutWrap="wrap" fxLayoutGap="1em">
  <mat-card 
    fxFlex="20%" 
    fxFlex.lt-md="33%" 
    fxFlex.lt-sm="50%" 
    fxFlex.lt-xs="100%"
    fxLayoutAlign="center" 
    *ngFor="let board of boards | async"
  >
    {{board.name}}
  </mat-card>
</div>

配置说明： #

• fxFlex="20%"：在桌面级的大屏幕下，每个卡片占容器宽度的20%，刚好一行能放下5个元素（100% ÷ 20% = 5），完美匹配你说的11个元素时5+5+1的布局
• fxFlex.lt-md="33%"：当屏幕宽度小于中等尺寸（比如平板竖屏）时，每个卡片占约33%宽度，一行可以放3个元素
• fxFlex.lt-sm="50%"：屏幕宽度小于小尺寸（比如手机横屏）时，每个卡片占50%宽度，一行放2个元素
• fxFlex.lt-xs="100%"：在极小屏幕（手机竖屏）下，每个卡片占满整行宽度，一行只放1个元素

这样调整后，不管屏幕尺寸怎么变，每行的元素数量都会自动适配，完全满足你的需求~

内容的提问来源于stack exchange，提问作者jauche