简评：近几年CSSFlexbox在前端开发者中非常流行。毫不奇怪，它使我们更容易在容器中创建动态布局及其内容。但是镇上出现了一个新人，叫做CSSGrid，它有很多flexbox功能，有时它比flexbox更好，有时则不然。作者回顾了flexbox和grid之间的区别，以及何时使用它们。先看本课的截图预览：1DVS2D如果你想学习这篇文章的精髓，就在这里：Flexbox是为1D布局设计的，Grid是为2D布局设计的。这意味着如果你想在一个方向上放置项目（比如标题栏中的三个按钮），那么你应该使用Flexbox：它比CSSGrid更灵活，同时需要更少的代码并且更容易维护。但是，当您需要在两个维度（行和列）中创建整个布局时，您应该使用CSSGrid：在这种情况下，CSSGrid将更加灵活并使您的标记更简单。代码也更容易维护。当然你可以把两者结合起来。上面的示例将完美地使用Grid进行页面布局，并使用Flexbox对齐标题栏中的内容。在文章的最后，我将展示如何做到这一点。Content-firstVSLayout-first另一个核心区别：Flexbox是基于内容的，而Grid是基于布局的。这看起来有点抽象，那么我们来看一个具体的例子，这样会更容易理解。我们将使用前面的header，HTML代码如下：layout，这些div层层叠叠：Flexboxheader然而，当我们给出一个display:flex样式时，元素排成一行。header{display:flex;}为了将注销按钮移到最右边，我们只需要找到那个元素并给它一个边距：header>div:nth-child(3){margin-left:auto;}结果如下：在这里我要你注意：我们让元素决定它们应该如何放置。我们不需要预定义除初始显示之外的任何内容：flex；.这是Flexbox和Grid之间的核心区别，当我们用Grid重新创建表头时，它会变得更加明显。尽管CSSGrid不用于创建一维标题，但在本文中了解Flexbox和Grid之间的核心区别仍然是一个很好的练习。Gridheader使用CSSGrid，我们可以通过多种方式创建标题。我将使用一个相当简单的方法，我们的网格有10列，每列1个单元格宽：header{display:grid;网格模板列：重复（10、1fr）；}和flexboxschemesee看起来一模一样。但是，我们可以看到下面的不同之处。我们将使用Chrome检查器来检查列：主要区别在于这种方式首先定义了列-布局。我们首先定义列的宽度，然后将内容放置在可用的网格中。这种方式迫使我们将标题分成多少列。除非我们更改网格，否则我们仅限于10列网格。使用Flexbox你不会面临这个限制。为了将注销按钮放在最右边，我们需要将它放在第10列：header>div:nth-child(3){grid-column:10;}检查网格时，它看起来像这样：我们可以'简单地给一个margin-left:auto;因为注销按钮已放置在布局中的精确网格中，在第三列中。为了移动它，我们需要找到另一个网格。结合这两者现在让我们看看如何结合这两者来将我们的页眉合并到我们的站点布局中。我们从构建站点布局开始：HTML标记：
