display:flex;多行多列布局学习

　　从以前的table布局到现在的div布局，再到未来的flex布局，CSS重构方面对展示行和适应性的要求越来越高；

　　首先来比较一下布局方式的更新意义：

　　　　table布局：

　　　　　　优点：1、兼容性好，ie6、ie7或者什么稀奇古怪的浏览器，table布局可以用最小的代价兼容这些稀奇古怪的浏览器；

　　　　　　　　   2、自适应性，根据内容自适应内部元素的宽高；

　　　　　　　　　3、开发时间短；

　　　　　　缺点：1、table嵌套table，性能差；

　　　　　　　　　2、对SEO不友好；

　　　　　　　　　3、样式可塑性差，无法准确实现设计图效果；

　　　　　　　　　4、不利于后期维护；

　　　　div+css布局：

　　　　　　优点：1、页面代码精简。加载速度得到很大的提高

　　　　　　　　　2、对于开发者来说，代码精简，便于阅读和维护

　　　　　　　　　3、利于SEO优化；

　　　　　　缺点：对于列表类的内容，无法自适应添加列，添加列时，得重新计算每个元素的宽度，重新设置CSS；

　　　　flexbox布局：(应该算是div+css的进阶)

　　　　　　优点：1、灵活方便，功能强大，不管是纵向横向，自适应宽高，Flexbox 就是一种“弹性布局”模型，能很好支持不同视口尺寸和设备。

　　　　　　缺点：1、兼容性差，兼容情况如下图；

　　　　　　　　　2、容器、项目中属性设置内容比较多，需多加练习；