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

原文標(biāo)題：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.

在網(wǎng)頁(yè)上布局是很費(fèi)勁的。布局如此艱難的原因是因?yàn)?，自從使?CSS 進(jìn)行布局成為可能之后，我們所依賴(lài)的那些布局方法并不是真正為復(fù)雜布局而設(shè)計(jì)的。盡管我們能夠通過(guò)一些 hack 來(lái)實(shí)現(xiàn)很多固定寬度的世界，比如仿制的欄。但是這些方法在響應(yīng)式的設(shè)計(jì)中要崩潰了。謝天謝地，我們還是有希望的。，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.

在這篇文章中，我將要闡明如何將這些組合在一起，同時(shí)你將會(huì)發(fā)現(xiàn)，理解了 flexbox 之后，更加明白網(wǎng)格布局。

A Note On Browser Support 瀏覽器支持的一個(gè)注記

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 網(wǎng)格布局目前在 Firefox 的開(kāi)發(fā)者版本和 nightly 版，Safari，Chrome 和 Opera中支持，或者在一個(gè)標(biāo)志之后（。。。。）。如果使用的是你開(kāi)發(fā)者版本或者 nightly版的瀏覽器或者激活了支持標(biāo)記的主流瀏覽器（比如Chrome），你在這所看到的一切都能生效。 我盡量保持一個(gè)最新的 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 將一個(gè)元素變成 flex 容器；可以使用display: grid將一個(gè)元素變成 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 容器當(dāng)前的子元素變成 flex 或者 grid 項(xiàng)。這些子元素?fù)碛?flex 或者 grid 項(xiàng)的初始值。

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.

在第一個(gè)例子中，在一個(gè)設(shè)置了dispaly: flex的包裝元素中有三個(gè)子元素。這就是我們開(kāi)始使用 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 項(xiàng)的初始值是：

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.

稍后在文章我們將看看這些屬性值是如何工作的。目前，你所要做的是在父元素上設(shè)置display: flex，flexbox 將會(huì)開(kāi)始生效。

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.

我可以給包裝器添加一個(gè)高度，在這種情況下，這個(gè)高度將定義flex 容器的高度。

We can use other values, instead of the default?stretch:

我們可以設(shè)置其他的值來(lái)取代默認(rèn)的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:

要控制在主軸上的對(duì)齊，使用 justify-content。默認(rèn)值是flex-start，這就是為什么 flex 項(xiàng)全部對(duì)齊做外邊距的原因。我們可以使用下面的任意值來(lái)替代：

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關(guān)鍵字尤其有趣。使用space-between，flex 容器中剩余的空白位置會(huì)平均分布在 flex 項(xiàng)之間。

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 容器中剩余的空白位置會(huì)平均分布在 flex 項(xiàng)兩邊。

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 項(xiàng)在 flex容器的開(kāi)始位置對(duì)齊，我們使用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.

在第二個(gè)例子中，我將 grid 容器的align-items的值修改成center。我們也可以修改一個(gè)多帶帶的 gird 項(xiàng)上的align-self屬性的值。此時(shí)，我把所有的項(xiàng)都設(shè)置成center，但是第二個(gè)項(xiàng)設(shè)置成 stretch。

In the third example, I have changed the value of?justify-items?and?justify-self?again, setting these to?center?and?stretch.

在第三個(gè)例子中，我再次修改了justify-items和justify-self的值，將這些設(shè)置成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.

上面的所有例子，我將網(wǎng)格區(qū)域中的內(nèi)容對(duì)齊，這些網(wǎng)格區(qū)域由起點(diǎn)網(wǎng)格線(xiàn)和終點(diǎn)網(wǎng)格線(xiàn)定義。

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.

我們也可以將容器中的網(wǎng)格整個(gè)對(duì)齊，如果我們的網(wǎng)格軌道是有固定大小的，那么它們將會(huì)比設(shè)置了display: grid的容器占據(jù)更小的空間。此時(shí)，我們使用 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.

為了將軌道移動(dòng)到右下角，我們可以把值變成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。這可能會(huì)引發(fā)一些我們不希望看到的行為，我們不想網(wǎng)格間隙變得更寬。然而，正如下圖和 CodePen 中的第三個(gè)例子中你看到的一樣，在軌道之間或者周?chē)邢嗤目臻g，就像在 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.

如果固定大小的軌道跨度超過(guò)一個(gè)軌道的寬度，它將會(huì)獲得額外的空間。在我們例子中的例子二和四更寬，例子三更高，因?yàn)樗麄冇蓄~外的空間分配給他們跨過(guò)的間隙。

We can completely center the grid by setting both values to?center, as shown in the last example.

我們可以通過(guò)將兩個(gè)值設(shè)置成center來(lái)完全地將網(wǎng)格居中，就像最后一個(gè)例子中展示的一樣。

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 中我們有非常完美的對(duì)齊能力，同時(shí)它們以一種普遍一直的方式工作。我們可以對(duì)齊多帶帶的項(xiàng)也可以對(duì)齊一組項(xiàng)，這反應(yīng)迅速，同時(shí)放置部分重疊——直到現(xiàn)在，web 一直都缺乏的東西。

Responsive By Default 默認(rèn)反應(yīng)

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.

在最后一節(jié)中，我們看看 alignment。在 flexbox 和網(wǎng)格布局中使用的box-alignment 屬性作用在一個(gè)區(qū)域，在這個(gè)區(qū)域我們看到了這些參數(shù)是如何形成一個(gè)世界的，而這個(gè)世界就是響應(yīng)式設(shè)計(jì)需要做的。像space-betweem，space-around和stretch這些值都允許響應(yīng)，在項(xiàng)之間或者周?chē)骄姆峙鋬?nèi)容。

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.

但是，還有很多。響應(yīng)式設(shè)計(jì)經(jīng)常需要維護(hù)比例。當(dāng)我們使用Ethan Marcotte"s 的文章中介紹的target除以 context方法為響應(yīng)式設(shè)計(jì)計(jì)算列時(shí)，我們維持原來(lái)絕對(duì)寬度設(shè)計(jì)的比例。Flexbox 和網(wǎng)格布局給了我們很簡(jiǎn)單的方法來(lái)處理設(shè)計(jì)中 的比例。

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給了我們一種從內(nèi)容外部入手實(shí)現(xiàn)彈性的方法。當(dāng)我們使用space-between來(lái)平均分配空間時(shí)，我們可以看到這種方式。首先，一些空間唄計(jì)算過(guò)之后的項(xiàng)占據(jù)，然后容器中剩余的空間被分割開(kāi)，平均地分配在項(xiàng)外面。我們可以通過(guò)在 flex 項(xiàng)自身上應(yīng)用屬性來(lái)得到更多的內(nèi)容分配的控制權(quán)。

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.

這些屬性通常更多地是用簡(jiǎn)單的 flex 屬性來(lái)描述。如果我們對(duì)一個(gè)項(xiàng)添加flex: 1 1 300px，我們來(lái)陳述一遍，flex-grow是1，項(xiàng)可以擴(kuò)大，flex-shrink是1，項(xiàng)可以收縮，并且flex-basis是300像素。把這個(gè)應(yīng)用到我們的卡片不居中，可以得到下面的這個(gè)例子。

See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.