首页 > 其他 > 详细

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

时间:2017-04-25 09:17:42      阅读:339      评论:0      收藏:0      [点我收藏+]

  从以前的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;多行多列布局学习

原文:http://www.cnblogs.com/milo-wjh/p/6758198.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!