|
不久以前，所有 HTML 页面的布局还都是通过 tables、floats 以及其他的 CSS 属性来完成的。面对复杂页面的布局，却没有很好的办法。然而 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 解决方案我们的标头包含了导航和一个按钮的相关链接。我们希望导航朝左对齐，按钮向右对齐。而导航中的链接务必正确对齐，且彼此相邻。CSS Grid 解决方案为了拆分导航和按钮，我们要为标头定义display: grid属性，并设置一个 2 列的网格。同时，我们还需要两行额外的 CSS 代码，将它们定位在相应的边界上。虽然链接为内链形式，但它们不能正确的对齐。由于 CSS grid 不具备基线选项（不像 Flexbox 具备的align-items属性），所以我们只能再定义一个子网格。CSS grid 在此步骤中，存在一些明显的布局上的缺陷。但你也不必过于惊讶。因为它的目标是对齐容器，而不是内部的内容。所以，用它来处理收尾工作，或许不是很好的选择哦。如果你已经浏览完整篇文章，那么结论不会让你感到意外。事实上，并不存在最好的布局方式。Flexbox 和 CSS grid 是两种不同的布局形式，我们应该根据具体的场景将它们搭配使用，而不是相互替代。对于那些跳过文章只想看结论的朋友（不用担心，我们也这样做），这里是通过实例比较后的总结：CSS grids 适用于布局大画面。它们使页面的布局变得非常容易，甚至可以处理一些不规则和非对称的设计。Flexbox 非常适合对齐元素内的内容。你可以使用 Flex 来定位设计上一些较小的细节。2D 布局适合使用 CSS grids（行与列）。Flexbox 适用于单一维度的布局（行或列）。共同学习并使用它们。网站设计www.zhandodo.com 本篇内容由网站建设公司 肥猫科技提供。 |
联系我的时候请说明是从三千网看到的信息，谢谢。
