月度归档： 2019年7月

Angular Flex Layout 进阶

Photo by Shaah Shahidh on Unsplash

大多数情况下，我们往往希望自己的页面是响应式的。除了使用 BootStrap 等CSS 框架，我们还有没有其他选择呢？答案当然是肯定的。作为支持指令的前端框架，Flex Layout 也提供了 Responsive API 帮助我们进行响应式布局。在实际使用中，我们只需在 Static API 后加上断点（breakpoint ）后缀就可以轻松实现一个响应式页面。

何为断点

在 Flex Layout 中，一个断点可以理解为由一个行为+指定页面尺寸=值组成。如 fxHide.lg = ‘true’ 就表明，当页面尺寸为 lg 时，该元素执行 fxHide 这个动作，也就是让该元素隐藏。

下面这个例子中，当页面尺寸为大于 sm 时，这个 div 在主轴方向就会扩展到容器的100%，否则就占50%。

继续阅读Angular Flex Layout 进阶