请参阅应用程序_请参阅规格：简介

请参阅应用程序

This is the next post in a series where I am explaining the CSS Grid specification, bit by bit. This time we are going to read the first section of the introduction. The introduction explains a lot of the concepts of grid layout and therefore this post touches on several things we will take a deeper look at later in this series.

这是本系列的下一篇文章，我将逐步介绍CSS Grid规范 。 这次我们将阅读介绍的第一部分。 引言解释了许多网格布局的概念，因此本篇文章涉及了一些内容，我们将在本系列的后面部分对此进行更深入的研究。

The introduction starts with the statement, “This section is not normative”. If something is normative it is a formal part of the specification, the rules that authors and user agents must follow. If something is not normative then it is informative. It is useful information to explain and clarify, but shouldn’t be considered part of the formal specification.

引言以“此部分不是规范性”声明开头。 如果某些东西是规范性的 ，则它是规范的正式部分，作者和用户代理必须遵循的规则。 如果某些事情不是规范性的，那么它就是信息性的 。 这是有用的信息，用于解释和说明，但不应视为正式规范的一部分。

Therefore the introduction is an informative part of the document, it serves to give an overview of grid layout.

因此，简介是本文档的内容丰富的部分，它用于概述网格布局。

Grid和Flexbox之间的区别 (Difference between Grid and Flexbox)

Right at the top of the specification, in the introduction, is the answer to the first question everyone asks me about Grid.

在规范的开头，在导言中，是每个人问我有关网格的第一个问题的答案。

What is the difference between grid and flexbox?

grid和flexbox有什么区别？

The main difference as described here is that Flexbox is single dimensional. This means it deals with the alignment of content in a single dimension - as a row OR as a column. Grid is two dimensional, it controls alignment in rows and columns at the same time.

这里描述的主要区别是Flexbox是一维的。 这意味着它以单一维度（行或列）处理内容的对齐方式。 网格是二维的，它控制在同一时间以行和列对准。

This CodePen demonstrates the difference between flexbox and grid, one or two dimensions.

此CodePen演示了flexbox和grid（一两个维度）之间的区别。

See the Pen Flexbox items vs grid items - 1d vs 2d by rachelandrew (@rachelandrew) on CodePen.

见笔Flexbox的物品VS电网项目- 1D VS 2D由rachelandrew（ @rachelandrew上） CodePen 。

The introduction also mentions some of the features of Grid Layout that do not exist in Flexbox. For example the ability to position items on the two axes as shown in this next example where I am using line-based positioning to position items. The example also demonstrates that Grid Layout enables the layering of items, which Flexbox does not.

简介还提到了Flexbox中不存在的某些Grid Layout功能。 例如，在下一个示例中显示了在两个轴上定位项目的能力，在此示例中，我正在使用基于行的定位来定位项目。 该示例还演示了Grid Layout启用了项目的分层，而Flexbox则没有。

See the Pen Grid items with line-based positioning and layering by rachelandrew (@rachelandrew) on CodePen.

请参见CodePen上的rachelandrew （ @rachelandrew ）通过线定位和分层的笔网格项目 。

The final paragraph of this part of the introduction reads as follows:

引言这一部分的最后一段如下：

Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be valuable and complementary tools for CSS authors.

尽管可以使用Grid或Flexbox表示许多布局，但是它们各自都有其特殊性。 Grid强制执行二维对齐，使用自上而下的布局方法，允许项目显式重叠，并具有更强大的扩展功能。 Flexbox专注于轴内的空间分布，使用更简单的自底向上方法进行布局，可以使用基于内容大小的换行系统来控制其辅助轴，并依靠基础标记层次结构来构建更复杂的布局。 预计对于CSS作者而言，这两者都是有价值的补充工具。

网格：强制二维对齐 (Grid: enforces 2-dimensional alignment)

This means that once you have a grid, things have to align to the grid. By using the ability of grid to span rows and columns, then using the Box Alignment properties to cause items to align to different positions in the grid area you can certainly get the effect of “breaking the grid”. Underneath it all is a strict, two dimensional grid.

这意味着一旦有了网格，事物就必须与网格对齐。 通过使用网格跨越行和列的能力，然后使用“框对齐”属性使项目与网格区域中的不同位置对齐，您当然可以得到“破坏网格”的效果。 它的下面是一个严格的二维网格。

In this next example, item two has a width and is aligned inside the grid area. The area itself however remains part of the grid.

在下一个示例中，项目2具有宽度，并在网格区域内对齐。 但是，该区域本身仍然是网格的一部分。

See the Pen Using alignment to break the grid by rachelandrew (@rachelandrew) on CodePen.

请参见CodePen上的rachelandrew （ @rachelandrew ） 使用钢笔使用对齐方式打破网格 。

网格：自上而下的布局方法 (Grid: a top-down approach to layout)

This enforcement of 2-dimensional alignment creates a requirement to do the layout from the top down. We need to know what our grid is in order to enforce alignment based on that grid.

这种二维对齐方式的实施要求从上到下进行布局。 我们需要知道我们的网格是什么，以便基于该网格实施对齐。

With grid you define your grid and items have to fit into it. There is the ability within grid layout to allow content to define the size of tracks. However, due to the strict two-dimensional grid, that sizing is going to size the entire track as in this very simple example. Later in this series we will look at all of the ways you might size these tracks.

使用网格，您可以定义网格，并且项目必须适合网格。 网格布局中具有允许内容定义轨道大小的功能。 但是，由于使用了严格的二维网格，因此按此大小设置大小将使整个轨道的大小改变，就像这个非常简单的示例中那样。 在本系列的后面部分，我们将介绍确定这些轨道大小的所有方法。

See the Pen Grid tracks taking sizing from an item by rachelandrew (@rachelandrew) on CodePen.

请参阅CodePen上的rachelandrew （ @rachelandrew ） 从项目中调整大小的笔网格轨迹 。

Flexbox：基于内容大小的换行系统 (Flexbox: a content size-based line-wrapping system)

You can make a wrapped layout with flexbox, therefore laying things out in two dimensions. However alignment happens in a single dimension, based on the content size and available space in the main axis.

您可以使用flexbox进行包装后的布局，因此可以二维地进行布局。 但是，根据内容大小和主轴上的可用空间，对齐会在一个维度上进行。

If you compare the following example to the grid example above, the sizing of the individual flex item does not change the sizing of items above it. If that is the type of layout you want, then you want to use Flexbox. When you want the strict grid of rows and columns, you need grid.

如果将以下示例与上面的网格示例进行比较，则单个弹性项目的大小不会更改其上方项目的大小。 如果这是您想要的布局类型，那么您想使用Flexbox。 当需要行和列的严格网格时，需要网格。

See the Pen Flex sizing does not change the column size by rachelandrew (@rachelandrew) on CodePen.

请参见CodePen上的rachelandrew （ @rachelandrew ） 更改 Pen Flex的大小不会更改列的大小 。

Flexbox：依赖于基础标记层次结构 (Flexbox: relies on the underlying markup hierarchy)

This sentence points to the fact that when using Flexbox, your layout is more tightly coupled to the document order of elements. While there are certainly attempts to make flex grid which use order to get past this issue, it generally isn’t a wholly satisfactory way to work. Grid enables the placement of items, without reference to where they appear in the document order.

这句话指出了这样一个事实，当使用Flexbox时，您的布局与元素的文档顺序更加紧密地耦合在一起。 虽然肯定有尝试使用order来制作可伸缩网格来解决此问题，但通常这并不是一种完全令人满意的工作方式。 网格可以放置项目，而无需参考它们在文档顺序中出现的位置。

That said, it is important to remember that the accessibility of your documents relies on the logical order as described in the markup. If you find yourself using grid to change the order of items visually, check whether it makes more sense to do that in the source.

也就是说，请务必记住，文档的可访问性取决于标记中描述的逻辑顺序。 如果您发现自己使用网格来可视地更改项目顺序，请检查在源代码中这样做是否更有意义。

而且，还有更多 (And, there is more)

We’re not actually all of the way through the introduction. However, I hope these examples shed some light on grid layout and the reasoning behind the development of the specification. We’ll take a look at the examples in the next part of the introduction in my next post.

实际上，我们并没有完全完成介绍。 但是，我希望这些示例能为网格布局和规范制定背后的原因提供一些启发。 在下一篇文章中，我们将在介绍的下一部分中查看示例。

翻译自: https://rachelandrew.co.uk/archives/2017/05/09/refer-to-the-spec-introduction/

请参阅应用程序