Angular Flex Layout 进阶

Photo by Shaah Shahidh on Unsplash

大多数情况下,我们往往希望自己的页面是响应式的。除了使用 BootStrap 等

CSS 框架,我们还有没有其他选择呢?答案当然是肯定的。作为支持指令的前

端框架,Flex Layout 也提供了 Responsive API 帮助我们进行响应式布局。在

实际使用中,我们只需在 Static API 后加上断点(breakpoint )后缀就可以轻

松实现一个响应式页面。

何为断点

在 Flex Layout 中,一个断点可以理解为由一个行为+指定页面尺寸=值组成。

如 fxShow.lg = ‘true’ 就表明,当页面尺寸为 lg 时,该元素执行 fxShow 这个

动作,也就是让该元素隐藏。

下面这个例子中,当页面尺寸为大于 sm 时,这个 div 在主轴方向就会扩展到

容器的100%,否则就占50%。

回退策略(Fallback)

和其他响应式 API 一样,灵活的响应式 API 也会引入一个所谓的回退策略的问

题,翻译成人类语言就是:当在一个元素上出现多个响应式断点的时候,如何

决定此时元素的状态。Flex Layout 回退策略总结起来就是:范围越小的断点

拥有越高的优先权。

何为断点的范围

形如 gt-lg、lt-lg 等断点会有一个范围, 这个范围在文档中通过一个数轴显示。

覆盖范围越广的断点,我们认为它的特定性越弱,因此优先权也最小。

非交叉断点( non-overlapping breakpoints)

非交叉断点是指断点之间没有交叉。回看一下上面的例子:

假如当前浏览器尺寸为 xl,但是由于这里只给出了 xs、lg 的处理,那么这个元

素就会回落到 fxShow 的指令上。假如当前浏览器尺寸为 lg,那么这个元素就

会回落到 fxHide.lg=”true” 上。

交叉断点( overlapping breakpoints )

交叉断点是指各个响应式断点之间范围有交叉。看看这个例子:

假如当前浏览器尺寸为 xl。由于 xl 既在 gt-xs 又在 gt-sm 的范围内,且 gt-sm

和 gt-xs 的相比范围更小,因此 xl 会落在 gt-sm 中,此时 fxFlex 就为 50%。

例子

利用 Responsive API 实现的一个例子

在大于 sm 的尺寸下,三个 mat-card 水平排列(row)。

在小于 sm 的尺寸下,三个 mat-card 垂直排列(column) 。

参考链接

Responsive API

相关阅读

Angular Flex Layout 入门

发表评论

电子邮件地址不会被公开。 必填项已用*标注