我应该使用Grid还是Flexbox？

In my recent presentation at Fluent Conf I demonstrated the common features and also the differences between Flexbox and CSS Grid Layout. Right now, we can only use CSS Grid Layout by enabling browser flags, however once Grid ships there will be many layout tasks where we could argue for the use of Grid or Flexbox as the solution. Here are some thoughts.

在我最近在Fluent Conf上的演讲中，我展示了Flexbox和CSS Grid Layout的共同特性以及区别。 现在，我们只能通过启用浏览器标志来使用CSS Grid Layout，但是，一旦Grid交付，我们将有许多布局任务，我们可以争辩使用Grid或Flexbox作为解决方案。 这里有一些想法。

主要布局与UI元素 (Major layouts vs. UI elements)

When people first encounter CSS Grid Layout, they tend to think of Grid as being the controller of the major page layout, providing a framework for headers and sidebars, main content and footers.

当人们第一次遇到CSS Grid Layout时，他们倾向于将Grid视为主要页面布局的控制者，为标题和侧边栏，主要内容和页脚提供框架。

See the Pen Grid Named Areas with header and footer by rachelandrew (@rachelandrew) on CodePen.

请参见CodePen上的rachelandrew （ @rachelandrew ）的带有标题和页脚的笔网格命名区域 。

You can see this use case in this example. Only the direct children become a Grid Item and so by declaring a Grid on my wrapper the header, panel, content and footer all become Grid Items and can be placed onto that Grid. Any elements inside those main containers can then be laid out by whichever method makes sense.

您可以在此示例中看到此用例。 只有直接的子级才成为Grid Item，因此通过在我的包装器上声明Grid，页眉，面板，内容和页脚都将成为Grid Item，并可以放置到该Grid上。 然后，可以使用任何有意义的方法来布局那些主容器内的任何元素。

Flexbox is not so well suited to creating these types of layouts. It is certainly possible to create a simple layout like the one above using Flexbox. However once flex items wrap, each row (or column if working with flex-direction: column), becomes a flex container itself. Space distribution happens across that row or column, you lose the ability to line things up with items in rows above.

Flexbox不太适合创建这些类型的布局。 当然可以使用Flexbox创建一种简单的布局，如上面的布局。 但是，一旦flex项包装完毕，每行（或列（如果使用flex-direction：column的话）将成为容器本身）。 空间分布发生在该行或该列上，您将无法将内容与上方行中的项目对齐。

Here we find the biggest difference between Grid and Flexbox. Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

在这里，我们发现Grid和Flexbox之间的最大区别。 Flexbox本质上是用于按单个维度（行或列）布置项目。 网格用于二维布置项目-行和列。

一维与二维 (One dimensional vs. Two dimensional)

Here is the most simple example of one versus two dimensional layout.

这是一维与二维布局的最简单示例。

See the Pen Flex and Grid demo by rachelandrew (@rachelandrew) on CodePen.

请参阅CodePen上rachelandrew （ @rachelandrew ）的Pen Flex和Grid演示 。

In the top layout I am using Flexbox to display a set of “cards”. The container has flex-wrap set to wrap and so the flex items wrap onto two lines, I have set flex-grow to 1, flex-shrink to 1 and flex-basis to 200 pixels. So my ideal box width is 200 pixels, but items are able to grow larger and shrink smaller.

在顶部布局中，我使用Flexbox显示一组“卡片”。 容器将flex-wrap设置为可包装，因此flex项可包装到两行，我将flex-grow设置为1，flex-shrink设置为1，flex-basis设置为200像素。 因此，我理想的包装盒宽度是200像素，但是物品能够变大和变小。

If my viewport is at a small enough width to display three boxes on row one, two boxes then wrap below. As flex-grow is set to 1, this means that the space leftover after the flex-basis value has been removed is shared equally between those boxes. Row one has three boxes, which are narrower than the boxes on row two where there are only two boxes.

如果我的视口的宽度足够小，可以在第一行显示三个框，则在下面包裹两个框。 将flex-grow设置为1时，这意味着删除了flex-basis值之后剩余的空间将在这些框之间平均分配。 第一行有三个框，比第二行只有两个框的框窄。

This is how flexbox works. However, most of the flexbox problems I am asked about are due to developers trying to make flexbox do layout in two dimensions. This is where you need Grid Layout.

这就是flexbox的工作方式。 但是，我被问到的大多数flexbox问题是由于开发人员试图使flexbox进行二维布局。 这是您需要网格布局的地方。

In the Grid version we define our grid on the wrapper element, the Grid Items then just drop into the Grid Cells already defined. So an item can line up with other items in the row but also in the column. If we want one of our items to stretch over two column or rows tracks we would need to target that item in some way.

在Grid版本中，我们在wrapper元素上定义了网格，然后将Grid Items放入已定义的Grid Cells中。 因此，一个项目可以与行中的其他项目以及列中的其他项目对齐。 如果我们希望我们的项目之一延伸到两列或两行轨道上，则需要以某种方式来定位该项目。

从内容开始工作与从网格定义开始工作 (Working from the content out vs. working from the Grid definition in)

What we see in the above example is how when we use Grid Layout we declare our grid and the content of any grid item then has to adapt to fit the shape of the area it is placed in.

在上面的示例中看到的是，当我们使用“网格布局”时，如何声明网格，然后任何网格项的内容都必须适应以适应其放置区域的形状。

If you have a bunch of items, don’t need them to line up with any other elements, but just want them displayed evenly and flexibly, you want flexbox. The most basic of examples demonstrates the behaviour of items getting an equal amount of space between them using justify-content: space-between.

如果您有一堆物品，则不需要它们与其他任何元素对齐，而只希望它们均匀灵活地显示，则需要flexbox。 最基本的示例演示了使用justify-content：space-between在项目之间获得相等空间的行为。

See the Pen Flexbox: distributed alignment by rachelandrew (@rachelandrew) on CodePen.

请参阅Pen Flexbox： rachelandrew（ @rachelandrew ）在CodePen上进行的分布式对齐 。

Grid implements the space distribution and alignment properties that are part of the Box Alignment Module, so there are possibilities to play with the alignment and spacing of grid items to some degree, but the fact remains that due to the two dimensional approach of grid, you can’t make one row of the grid behave differently to the one above. Instead you’ll need to change the properties on the individual grid items. Making them span more cells, or use different alignment values.

Grid实现了Box Alignment Module的一部分的空间分布和对齐属性，因此在某种程度上可以使用网格项的对齐和间距，但是事实仍然是由于网格的二维方法，您可以不能使网格的某一行的行为与上面的不同。 相反，您需要更改各个网格项目上的属性。 使它们跨更多的单元格，或使用不同的对齐值。

So there is your choice. Do you want to let your content control the way it is displayed, on a row by row or column by column basis? That’s flexbox.

因此，您可以选择。 您是否要让您的内容以逐行或逐列的方式控制其显示方式？ 那是flexbox 。

Or, do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That’s grid.

或者，您是要定义一个网格，还是允许将项目自动放置到该网格定义的单元格中，或者使用基于行的定位或网格模板区域来控制它们的定位？ 那是网格 。

If you want to see a lot more grid examples, take a look at my collection on Grid by Example.

如果您想看到更多的网格示例，请查看我在Example上关于Grid的收藏。

翻译自: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/