在最近的一个项目中，我们终于将Flexbox广泛用于页面布局当中。通过这次实战，让我对Flexbox相关知识有了更进一步的了解，也在这方面增涨了不少的知识。接下来，我将分三个部分来解释Flexbox在Web布局中的实战。

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。

自从我从事 WEB 开发以来，一直都在规规矩矩地使用标准的栅格布局。直到有一次在公司跟实习生交流时，我意识到开发者的思维已经被条条框框固定住了。这里并不是想说栅格布局这种规规矩矩的布局有什么不好，实际上这些布局就像是沃尔沃汽车一样，让人感到安稳和可靠。但是，拥抱变化何尝不是一件趣事？非常幸运的是，我能与众多才华横溢的设计师共同工作。在最近的一个项目中，他们提出了一种基于栅格布局的菱形布局。话不多说，迎战问题(•̀o•́)ง！

当你想实现两列等宽，左边一些内容，右边一些内容时，基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半，并且可以明显的区分他们。在CSS中有很多方法都可以实现，那么来看看如何用多种方法实现这种两列等宽布局。

在众多浏览器刚刚支持 CSS 的时候，我就已经开始使用它了，并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候，浏览器之间的兼容性虽然不好，但我仍然热衷于尝试层出不穷的新特性。最近几年在 CSS 领域，我们看到了许多重大进展。其中，web 字体、渐变、阴影和媒体查询已经成为了我们日常工作流的必备工具。CSS 布局的未来看起来一片大好。在这篇文章中，我将会介绍 CSS 规范中一些激动人心的布局模块。在未来，我们可以更有效地实现网格布局，更轻松地创建等高列或者均匀分配内容到整个页面。类似 Adobe 的公司往往熟悉布局设计的细节，借助它们的帮助来制定相关规范，我们就能更准确地控制页面在浏览器上的显示方式，同时避免对页面内容的影响。

Flexible boxes layout是W3C为了更好的在网页中排版和布局而设计出来的一个模块。它用来可以处理更加复杂的布局。它本质是盒模型的延伸，它可以进一步去规范容器中子元素盒模型之间的相对关系。

HTML文档中有文档流，其实在CSS Grid Layout中有网格流。简单点理解就是，在一个被显式声明为网格的容器中，其所有子元素自动被认定为网格单元格，而这些网格单元格在没有被显式设置明确位置时，浏览器将会自动为这些网格单元格的位置进行计算，按照先后顺序从左向右，或从上到下排列。在这里把这种方式称之为网格的流动。

最近一直在学习CSS Grid布局相关的知识与使用，虽然目前浏览器对其支持度还并不十分的友好，但我始终相信有一天，浏览器会支持，Web人员也迟早有一天能在自己的布局中使用上CSS Grid。前几天花了几节内容，介绍了CSS Grid布局中的概念、测试环境、创建单元格、合并单元、网格线创建和网格区域相关的内容。可以说这些内容都是CSS Grid布局最基础和最常用的相关知识，当然，除了这些之外，还会有其他相关的知识，今天要与大家一起探讨的就是有关于CSS Grid Layout中的独立源与网格层叠顺序。

在CSS Grid Layout中除了可以使用风格线实现网格布局之外，还可以使用网格区域来实现布局。在《CSS Grid布局：网格单元格布局》和《CSS Grid布局：合并单元格布局》文中都已经领略了CSS Grid Layout中gird-area实现的单元格和合并单元格的布局，但这仅是网格布局使用较为简单、基础的应用。在这篇文章中，将和大家一起探讨CSS Grid Layout中grid-area其他的功能与使用。

我想通过前面几篇有关于CSS Grid布局的介绍，大家对CSS Grid Layout也略有了解吧，如果你有动手写过的话，你应该可以借助网格线制作一些布局效果出来，比如说单元格布局，合并单元格布局等。是否有一种感觉，CSS Grid Layout好强大，好灵活。是不是期待浏览器厂商早一天能支持。