Angular Material 的布局

1. material 官网的 layout介绍：
https://material.angular.io/cdk/layout/overview

2. 响应式布局的Angular Flex布局（带有Angular材质）是否优于Bootstrap？
https://codinglatte.com/posts/angular/angular-flex-better-than-bootstrap/

3. 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版中flex的学习（弹性盒模型）：
https://www.bilibili.com/video/BV1XJ411X7Ud?p=131

4. flex学习的参考网站：
（1）https://www.runoob.com/cssref/css3-pr-flex.html
（2）https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

下面的5-9教程不适合Angular4以上的版本：

5. Angular Material 教程之布局篇 (一) : 布局简介
https://segmentfault.com/a/1190000007215707
6. Angular Material 教程之布局篇 (二) : 布局容器
https://segmentfault.com/a/1190000007217054
7. Angular Material 教程之布局篇 (三) : 布局子元素
https://segmentfault.com/a/1190000007217765
8. Angular Material 教程之布局篇 (四) : 子元素对齐
https://segmentfault.com/a/1190000007217802
9. Angular Material 教程之布局篇 (五) : 布局参数
https://segmentfault.com/a/1190000007217834

其余Angular material Flex布局资料：

10. 一个简单的工具，可帮助您确定设备对哪些媒体查询做出响应：
https://pdf-lib.org/Tools/MediaQueries

11. Angular Flex布局基础(重要）：
https://www.angularjswiki.com/flexlayout/basics/

12. 查看手机分辨率的网址：
https://material.io/resources/devices/

13. 使用angular + material 2 + flex-layout 开发项目：
https://www.jianshu.com/p/93047a355ba1

14. angular Flex布局：
https://www.jianshu.com/p/1b8f03f7861e

15. angular4 Flex Layout开发实践：
https://blog.csdn.net/j_bleach/article/details/77513213?locationNum=2&fps=1

16. Angular Flex-Layout总结：
https://www.jianshu.com/p/62486b28a1e8

17. 使用 Angular Flex-Layout（主要）：
https://blog.csdn.net/wf19930209/article/details/83930354

flex弹性盒与响应式布局的学习笔记：

使用 Angular 团队在Github 上有个库叫做angular/flex-layout来进行布局基础需要操作：

（1）npm install --save @angular/flex-layout@9.0.0-beta.29

（2）在app.modules.ts中引入下列语句：import { FlexLayoutModule } from '@angular/flex-layout';

（3）并imports:[]里：引入FlexLayoutModule

完成以上操作，才能在Angular中使用Angualr material 进行布局。

完成上述操作运行ng serve出现了以下错误：

解决方案：
flex的版本和其它dependancy的版本不匹配造成的。参照该网站进行修改https://github.com/angular/flex-layout/issues/1200
注意：flex版本一定要和其它dependancy的版本匹配不然就会出现上述错误。

Angular element 的布局（可以用里面的组件）

网站：https://element-angular.faas.ele.me/basic/layout

Angular ng-bootstrap布局（可以用里面的组件）

网站：https://ng-bootstrap.github.io/#/components/carousel/examples#navigation

原生UI（MUI）：

• 以iOS 7为基础，补充部分Android特有控件
  网站：https://dev.dcloud.net.cn/mui/ui/#scroll

其余响应式布局网站参考

1. jQuery网站：https://jquery.com
2.师兄的网站： https://wcccny.org/home
3.导航条代码参考：https://github.com/cli3d/PlayGround
4.主页响应式布局及开发过程用到的资料：https://blog.csdn.net/weixin_43938259/article/details/105890174
5. 烹饪网站：https://cooking.nytimes.com
6. 迪卡侬网站：https://www.decathlon.com.cn/zh/