摘要：原文標題原文鏈接在網頁上布局是很費勁的。的新值和都是屬性的新值。再一次，很明顯地看到，布局有一些默認的行為。在網格布局中我們可以看到相同的效果。在這種情況下，容器的高度由項的最大高度決定。我們可以將項按照列擺放而不是行。

原文標題：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 LINK

In 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.