然而 Flexbox 的出现，便轻松的解决了复杂的 Web 布局。它是一种专注于创建稳定的响应式页面的布局模式，并可以轻松地正确对齐元素及其内容。如今已是大多数 Web 开发人员首选的 CSS 布局方式。
现在，又出现了一个构建 HTML 优秀布局体系的新竞争者。（冠军头衔正在争夺中…）它就是强大的 CSS Grid 布局。直到本月月底，它也将在 Firefox 52 和 Chrome 57 上得到原生支持，相信不久也会得到其他浏览器兼容性的支持。
要了解这两个体系构建布局的方式，我们将通过相同的 HTML 页面，利用不同的布局方式 （即 Flexbox 与 CSS Grid）为大家区分。
同时，你也可以通过文章顶部附近的下载按钮，下载演示项目进行对比，或者通过在线演示来察看它们：
简版静态页面布局
该页面的设计相对比较简单,它是由一个居中的容器组成，在其内部则包含了标头、主要内容部分、侧边栏和页脚。接下来，我们要完成同时保持 CSS 和 HTML 尽可能整洁的挑战事项：
在布局中将四个主要的部分进行定位。
将页面变为响应式页面；
对齐标头：导航朝左对齐，按钮向右对齐。
如你所见，为了便于比较，我们将所有事项从简处理。那么，让我们从靠前个挑战事项开始吧！
挑战 1：定位页面部分
Flexbox解决方案
我们将从Flexbox解决方案开始。我们将为容器添加display: flex来指定为 Flex布局，并指定子元素的垂直方向。
如你所见，Flex将其很好的实现了出来，但是仍需要相当多的CSS属性，并借助了额外的HTML元素。那么，让我们看看CSS Grid如何实现的。
CSS Grid解决方案
针对本项目，有几种不同的 CSS Grid 解决方法，但是我们将使用网格模板区域语法来实现，因为它似乎最适合我们要完成的工作。
就是这样！ 我们现在将遵循上述结构进行布局，甚至不需要我们处理任何的 margins 或 paddings 。
挑战 2：将页面变为响应式页面
Flexbox 解决方案
这一步的执行与上一步密切相关。对于 Flexbox 解决方案，我们将更改包装器的flex-direction属性，并调整一些 margins。
由于网页比较简单，所以我们在媒体查询上不需要太多的重写。但是，如果遇见更为复杂的布局，那么将会重新的定义相当多的内容。
CSS Grid 解决方案
由于我们已经定义了网格区域，所以我们只需要在媒体查询中重新排序它们。 我们可以使用相同的列设置。
挑战 3：对齐标头组件
Flexbox 解决方案
我们的标头包含了导航和一个按钮的
免责声明：文章内容不代表本站立场，本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺，仅供读者参考；文章版权归原作者所有！本站作为信息内容发布平台，页面展示内容的目的在于传播更多信息；本站不提供任何相关服务，阁下应知本站所提供的内容不能做为操作依据。市场有风险，投资需谨慎！如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。
