摘要：原文标题原文链接在网页上布局是很费劲的。的新值和都是属性的新值。再一次，很明显地看到，布局有一些默认的行为。在网格布局中我们可以看到相同的效果。在这种情况下，容器的高度由项的最大高度决定。我们可以将项按照列摆放而不是行。
原文标题：CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout
原文链接：https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
Layout on the web is hard. The reason it is so hard is that the layout methods we’ve relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design. Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS grid layout and the box alignment module.
在网页上布局是很费劲的。布局如此艰难的原因是因为，自从使用 CSS 进行布局成为可能之后，我们所依赖的那些布局方法并不是真正为复杂布局而设计的。尽管我们能够通过一些 hack 来实现很多固定宽度的世界，比如仿制的栏。但是这些方法在响应式的设计中要崩溃了。谢天谢地，我们还是有希望的。，CSS Grid, Flexbox 和 Box Alignment就是我们的希望。
In this article, I’m going to explain how these fit together, and you’ll discover that by understanding flexbox you are very close to understanding much of grid layout.
在这篇文章中，我将要阐明如何将这些组合在一起，同时你将会发现，理解了 flexbox 之后，更加明白网格布局。
A Note On Browser Support 浏览器支持的一个注记CSS grid layout is currently behind a flag or available in the developer and nightly builds of Firefox, Safari, Chrome and Opera. Everything you see here can be seen to be working if you use a developer or nightly browser or enable the flag in a mainstream browser that has flagged support. I am trying to keep an up-to-date list of support for grid layouts.
CSS 网格布局目前在 Firefox 的开发者版本和 nightly 版，Safari，Chrome 和 Opera中支持，或者在一个标志之后（。。。。）。如果使用的是你开发者版本或者 nightly版的浏览器或者激活了支持标记的主流浏览器（比如Chrome），你在这所看到的一切都能生效。 我尽量保持一个最新的 list of support for grid layouts。
New Values For Display Display 的新值Both grid and flexbox are new values for the display property. To make an element a flex container, we use display: flex; to make it a grid container, we use display: grid.
grid 和 flexbox 都是 display 属性的新值。我们可以使用display: flex 将一个元素变成 flex 容器；可以使用display: grid将一个元素变成 grid 容器。
As soon as we do so, the immediate children of our flex or grid container become flex or grid items. Those immediate children take on the initial values of flex or grid items.
一旦我们这么做之后， flex 或者 grid 容器当前的子元素变成 flex 或者 grid 项。这些子元素拥有 flex 或者 grid 项的初始值。
DISPLAY: FLEX LINKIn the first example, we have three elements in a wrapper element set to display: flex. That’s all we need to do to start using flexbox.
在第一个例子中，在一个设置了dispaly: flex的包装元素中有三个子元素。这就是我们开始使用 flexbox 所需要做的。
Unless we add the following properties with different values, the initial values for the flex container are:
如果我们不添加下面这些不同值的属性，flex 容器的初始值是：
flex-direction: row
flex-wrap: no-wrap
align-items: stretch
justify-content: flex-start
The initial values for our flex items are:
flex 项的初始值是：
flex-grow: 0
flex-shrink: 1
flex-basis: auto
We’ll look at how these properties and values work later in this article. For now, all you need to do is set display: flex on a parent, and flexbox will begin to work.
稍后在文章我们将看看这些属性值是如何工作的。目前，你所要做的是在父元素上设置display: flex，flexbox 将会开始生效。
See the Pen Flexbox Defaults by rachelandrew (@rachelandrew) on CodePen.
I could give the wrapper a height, and in this case the height of the flex container would be defined by that height.
我可以给包装器添加一个高度，在这种情况下，这个高度将定义flex 容器的高度。
We can use other values, instead of the default stretch:
我们可以设置其他的值来取代默认的stretch:
flex-start
flex-end
baseline
stretch
To control the alignment on the main axis, use the justify-contentproperty. The default value is flex-start, which is why our items are all aligned against the left margin. We could instead use any of the following values:
要控制在主轴上的对齐，使用 justify-content。默认值是flex-start，这就是为什么 flex 项全部对齐做外边距的原因。我们可以使用下面的任意值来替代：
flex-start
flex-end
center
space-around
space-between
The space-between and space-around keywords are especially interesting. With space-between, the space left over after the flex items have been displayed is distributed evenly between the items.
space-between和space-around关键字尤其有趣。使用space-between，flex 容器中剩余的空白位置会平均分布在 flex 项之间。
Using space-around is similar except that the space left over is distributed on both sides of the items. You get a half-sized gap on each end.
使用space-around，flex 容器中剩余的空白位置会平均分布在 flex 项两边。
You can see these properties and values in the CodePen below.
你可以在下面的 CodePen中看到这些属性和值。
See the Pen Flexbox Alignment flex-direction: row by rachelandrew (@rachelandrew) on CodePen.
If instead we want them to align to the start of the flex container, we use flex-start.
如果我们想要 flex 项在 flex容器的开始位置对齐，我们使用flex-start。
We can use justify-items, too, including space-between and space-around. The container needs to have enough height for you to see each in action, though!
我们也可以使用justify-items，包括space-between和space-around。但是要看到这些效果，容器需要足够的高度！
See the Pen Flexbox Alignment flex-direction: column by rachelandrew (@rachelandrew) on CodePen.
In the second example, I have changed the value of align-items on the grid container to center. We can also change this value on an individual grid item using the align-self property. In this case, I have set all items to center, but item two to stretch.
在第二个例子中，我将 grid 容器的align-items的值修改成center。我们也可以修改一个多带带的 gird 项上的align-self属性的值。此时，我把所有的项都设置成center，但是第二个项设置成 stretch。
In the third example, I have changed the value of justify-items and justify-self again, setting these to center and stretch.
在第三个例子中，我再次修改了justify-items和justify-self的值，将这些设置成center和stretch。
In all of the examples above, I have aligned the content of the grid areas, the areas defined by the start and end grid lines.
上面的所有例子，我将网格区域中的内容对齐，这些网格区域由起点网格线和终点网格线定义。
We can also align the entire grid inside the container, if our grid tracks are sized so that they take up less space than the container that has been set to display: grid. In this case, we use the align-contentand justify-content properties, as with flexbox.
我们也可以将容器中的网格整个对齐，如果我们的网格轨道是有固定大小的，那么它们将会比设置了display: grid的容器占据更小的空间。此时，我们使用 align-content 和 justify-content，就像 flexbox。
See the Pen Grid Alignment: aligning the grid by rachelandrew (@rachelandrew) on CodePen.
To move the tracks to the bottom right, we change the values to end.
为了将轨道移动到右下角，我们可以把值变成end。
Just as with flexbox, we can use space-around and space-between. This might cause some behavior that we don’t want as the grid gaps essentially become wider. However, as you can see from the image below and in the third example in the CodePen, we get the same space between or around the tracks as we see with flexbox.
就像 flexbox 一样，我们可以使用space-around和sapce-between。这可能会引发一些我们不希望看到的行为，我们不想网格间隙变得更宽。然而，正如下图和 CodePen 中的第三个例子中你看到的一样，在轨道之间或者周围有相同的空间，就像在 flexbox 中一样。
The fixed-sized tracks will gain additional space if they span more than one track. Element two and four in our example are wider and three is taller because they are given the extra space assigned to the gap they span over.
如果固定大小的轨道跨度超过一个轨道的宽度，它将会获得额外的空间。在我们例子中的例子二和四更宽，例子三更高，因为他们有额外的空间分配给他们跨过的间隙。
We can completely center the grid by setting both values to center, as shown in the last example.
我们可以通过将两个值设置成center来完全地将网格居中，就像最后一个例子中展示的一样。
We have very nice alignment abilities in both flexbox and grid, and they work in a generally consistent way. We can align individual items and groups of items in a way that is responsive and prevents overlap — something the web has lacked until now!
在 flexbox 和 grid 中我们有非常完美的对齐能力，同时它们以一种普遍一直的方式工作。我们可以对齐多带带的项也可以对齐一组项，这反应迅速，同时放置部分重叠——直到现在，web 一直都缺乏的东西。
Responsive By Default 默认反应In the last section, we looked at alignment. The box-alignment properties as used in grid and flexbox layouts are one area where we see how these specifications have emerged in a world where responsive design is just how things are done. Values such as space-between, space-around and stretch allow for responsiveness, distributing content equally among or between items.
在最后一节中，我们看看 alignment。在 flexbox 和网格布局中使用的box-alignment 属性作用在一个区域，在这个区域我们看到了这些参数是如何形成一个世界的，而这个世界就是响应式设计需要做的。像space-betweem，space-around和stretch这些值都允许响应，在项之间或者周围平均的分配内容。
There is more, however. Responsive design is often about maintaining proportion. When we calculate columns for a responsive design using the target ÷ context approach introduced in Ethan Marcotte’s original article on fluid grids, we maintain the proportions of the original absolute-width design. Flexbox and grid layouts give us far simpler ways to deal with proportions in our designs.
但是，还有很多。响应式设计经常需要维护比例。当我们使用Ethan Marcotte"s 的文章中介绍的target除以 context方法为响应式设计计算列时，我们维持原来绝对宽度设计的比例。Flexbox 和网格布局给了我们很简单的方法来处理设计中 的比例。
Flexbox gives us a content-out approach to flexibility. We see this when we use a keyword value of space-between to space our items evenly. First, the amount of space taken up by our items is calculated, and then the remaining space in the container is divided up and used evenly to space out the items. We can get more control of content distribution by way of properties that we apply to the flex items themselves:
Flexbox给了我们一种从内容外部入手实现弹性的方法。当我们使用space-between来平均分配空间时，我们可以看到这种方式。首先，一些空间呗计算过之后的项占据，然后容器中剩余的空间被分割开，平均地分配在项外面。我们可以通过在 flex 项自身上应用属性来得到更多的内容分配的控制权。
flex-grow
flex-shrink
flex-basis
These three properties are more usually described by the shorthand flex property. If we add flex: 1 1 300px to an item, we are stating that flex-grow should be 1 so that items can grow, flex-shrinkshould be 1 so that items can shrink, and the flex-basis should be 300 pixels. Applying this to our cards layout gives us the example below.
这些属性通常更多地是用简单的 flex 属性来描述。如果我们对一个项添加flex: 1 1 300px，我们来陈述一遍，flex-grow是1，项可以扩大，flex-shrink是1，项可以收缩，并且flex-basis是300像素。把这个应用到我们的卡片不居中，可以得到下面的这个例子。
See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.