学习中,本篇偏概念,没什么实质内容。

CSS 布局技术的发展经历了 table、Box model、Flexbox 和 Grid 这几个阶段。(然而我 Box model 还没有掌握好,还是 table 简单明了,我很有经验)

显示器分辨率的分化,以及之后移动浏览器进入主流,启发了如 Liquid layout、Resonsive design 之类的设计风格。

支持 Responsive design 的前端框架如 Bootstrap 的流行,启发了 Flexbox 和 Grid 标准的制订。

CSS Flexbox CSS Grid
时间 ^1^ 约 2011 约 2017
浏览器兼容性 ^2^ 更好 主流最新版都支持
适用场景 单一维度布局
局部小组件的布局
二维网格布局
页面整体布局
CSS Transition 支持 不支持
采用的框架 Bootstrap、Foundation 等
  1. 这个时间不太好表述,算是被大家广泛认知的时间吧。目前两者都处于 W3C Candidate Recommendation 阶段,而一个标准从酝酿到提出,再到被标准组织采纳和被浏览器厂商支持,其中有很多时间节点。
  2. 浏览器兼容性不光是最新版本是否已支持,还要向下追溯,考虑目前流通的所有版本支持的比例。因为某些环境下,升级浏览器最新版本不一定是个可选项。如果不考虑移动浏览器,兼容性的情况似乎好一些了,从前 IE 6、7、8 兼容的体验记忆犹新。我在想,是否存在某些机构因为升级浏览器导致遗留系统无法工作,而继续使用版本很低的浏览器的情况呢,那应该挺有趣的。

总结,Flexbox 的大部分功能都可以用 Grid 实现,但两者并不是互斥关系,可以根据各自特点互补,结合使用实现页面布局。