首页 > 代码库 > display:flex;多行多列布局学习

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、容器、项目中属性设置内容比较多,需多加练习;

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