使用过程中踩了几个坑，获得的教训是：不要忙着上手工具做项目！先把
官方文档
过一遍，先了解工具怎么用再开始！否则就只能像无头苍蝇一样慢慢试错，走一条最远的学习路径。
CSS的东西与很多编程知识不同，它没有什么高深的“底层知识”需要开发者了解，我只要熟悉相关属性即可使用其构建页面，而要熟悉它只有靠平时多练了。另外，构建页面的工作其实并不简单，尤其是目前的页面都有“多端适配”的需求，这就要求我在动手写代码前先做版面的设计工作（Flex-Layout官方文档的开发流程建议里提到），这个工作就如同设计那些看不见摸不着的后端模块一样，都需要一种统揽全局的能力，否则开发过程中修修补补，最终成果将变得混乱不堪，令开发者和产品接受者都不满意。
此工具提供了几个高度封装的API，以令使用者无须编写CSS文件即可便捷使用Flex和CSS-Grid特性构建页面。例子如下：
我在标签内写这些标签属性的顺序为：对自身生效、对子元素生效、响应式api（也按对自身、对子元素生效顺序）。
FL常用静态api有：
一、用在自身的：（当父容器设置了fxLayout属性才生效)
fxFlex：大小
fxFlexOffset：偏移值
fxFlexAlign：特别指定自身对齐方式（覆盖父容器设置）
fxFlexFill：充满父容器
gdArea：其作为一个Grid内的子元素的区域名
二、用在父容器的：
fxLayout：声明这是一个Flex容器默认即为row（但未具有换行特性）
fxLayoutAlign：子元素对齐方式
fxLayoutGap：子元素间隔
gdAreas：声明这是一个Grid容器和其子元素布局方式
gdGap：Grid内元素的间隔
FL的响应式api即为满足某些条件（指定的屏幕尺寸）的静态api，简单地为静态属性加上相应后缀即可，同时指定多个相同的静态属性则dom会按从小到大的屏幕尺寸做出响应。
后缀和相应条件关系如下：
