[譯]CSS Grid, Flexbox 和 Box Alignment:網頁佈局的新系統

原文標題：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 將會開始生效。

<p data-height="265" data-theme-id="light" data-slug-hash="ZOpOqB" data-default-tab="css,result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox Defaults" class="codepen">See the Pen Flexbox Defaults by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

DISPLAY: GRID LINK

To lay out items on a grid, we use display: grid. In order that we can see the grid’s behavior, this example has five cards to lay out.

爲了在網格中佈置項，咱們使用display: grid。這個例子有五個卡片來佈局，以便咱們可以看到網格的行爲。

Adding display: grid won’t make a dramatic change; however, our child items are all now grid items. They have fallen into a single-column track grid, displaying one below the other, the grid creating implicit row tracks to hold each item.

添加display: flex不會製造一個戲劇性的變化；然而，全部的子元素如今都是 grid 項。它們都在一個單列的通道網格中，一個接一個的往下排列，網格建立了一個隱式的行軌道保持它們。

<p data-height="265" data-theme-id="light" data-slug-hash="QEKGNm" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid Defaults" class="codepen">See the Pen Grid Defaults by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

Once again, we have some default behavior in evidence. We haven’t positioned any of these grid items, but they are placing themselves onto our grid, one per cell of the grid. The initial values of the grid container are:

再一次，很明顯地看到，（佈局）有一些默認的行爲。咱們沒有擺聽任何 grid 項，但它們都把本身放到咱們的網格之中，每個 grid 項佔據一個網格單元。grid 容器的初始值是：

• grid-auto-flow: row

• grid-auto-rows: auto

• align-items: stretch

• justify-items: stretch

• grid-gap: 0

These initial values mean that our grid items are placed one into each cell of the grid, working across the rows. Because we have a three-column track grid, after filling the grid cell of the third column, a new row is created for the rest of the items. This row is auto-sized, so will expand to fit the content. Items stretch in both directions, horizontal and vertical, filling the grid area.

這些初始值表示的意思是：在每一行中，每個 grid 項都被放在網格中的一個單元格中。由於咱們有一個三欄的通道網格，因此在第三欄填滿以後，剩下的 grid 項會建立新的一行。這個新行是大小是自適應的，因此將會拓展以適應內容。網格中的元素在水平和垂直兩個方向上伸展填充網格區域。

Box Alignment

In both of these simple examples, we are already seeing values defined in the box alignment module in use. 「Box Alignment Module Level 3」 essentially takes all of the alignment and space distribution defined in flexbox and makes it available to other modules. So, if you already use flexbox, then you are already using box alignment.
Let’s look at how box alignment works in flexbox and grid, and the problems that it helps us solve.

在這些簡單的例子中，咱們已經使用了一些在 box alignment 模塊中定義的值。「Box Alignment Module Level 3」基本上擁有全部 flexbox 中定義的的對齊和空白分配能力，而且讓它可以在其餘模塊中使用。因此，若是你已經使用了 flexbox，那麼你已經在使用 box alignment。讓咱們來看看 box alignment 是如何在 flexbox 和 grid 中工做的，和一些 box alignment 能夠幫咱們解決的難題。

EQUAL-HEIGHT COLUMNS 等高列

Something that was very easy to create with old-school table-based layouts, yet fiendishly difficult using positioning and floats, is equal-height columns. In the floated example below, our cards contain unequal amounts of content. We have no way of indicating to the other cards that they should visually take on the same height as the first card — they have no relationship to each other.

有一種佈局使用老式的表單佈局來建立是很是簡單的，可是使用定位和浮動確實極其困難，這就是等高列布局。在下面的浮動例子中，咱們的卡片包含不相同的內容。咱們沒法告知其餘的卡片在視覺上和第一個卡片保持高度一致——他們彼此之間沒有關聯。

<p data-height="265" data-theme-id="light" data-slug-hash="YWGrPy" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Floated Columns" class="codepen">See the Pen Floated Columns by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

As soon as we set the display property to grid or flex on a parent, we give the children a relationship to each other. That relationship enables the box-alignment properties to work, making equal-height columns simple.

一旦咱們爲父元素設置display屬性爲 grid 或者 flex，便給子元素彼此之間賦予了關聯性。這種關聯性使得box-alignment 屬性可以生效，讓登高欄的實現變得簡單。

In the flex example below, our items have unequal amounts of content. While the background on each lines up, it doesn’t sit behind the content as it would for floated elements. Because these items are displayed in a row, the property that controls this behavior is align-items. Creating equal-height columns requires that the value be stretch — the initial value for this property.

在下面的 flex 例子中，flex 子項有不一樣數量的內容。當每一項都加上背景色時，背景色不像在浮動元素中同樣在內容區域的後面。由於這些項都是在一行中顯示。控制這個行爲的屬性是align-items。建立等高列須要將align-items的值設置成stretch——它的初始值。

<p data-height="265" data-theme-id="light" data-slug-hash="ZOpXEM" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox Equal Height Columns" class="codepen">See the Pen Flexbox Equal Height Columns by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

We see the same with grid layouts. Below is the simplest of grid layouts, two columns with a sidebar and main content. I’m using those fraction units again; the sidebar has 1 fraction of the available space, and the main content 3 fractions. The background color on the sidebar runs to the bottom of the content. Once again, the default value of align-items is stretch.

在網格佈局中咱們能夠看到相同的效果。下面是最簡單的網格佈局例子，兩列，一列側邊欄，一列主要內容。我再次使用這些分數單位；側邊欄是可用空間中的1份，主體內容是可用空間中的3份。側邊欄的背景色跑到了內容的底部（對齊在底部）。再說一次，align-items的默認值是stretch。

<p data-height="265" data-theme-id="light" data-slug-hash="GqjMJj" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid Equal Height Columns" class="codepen">See the Pen Grid Equal Height Columns by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

ALIGNMENT IN FLEXBOX Flexbox 中的對齊

We’ve seen how the default value of align-items for both grid and flexbox is stretch.

咱們已經看到了 align-items在 flex 和 grid 中的默認值都是stretch。

For flexbox, when we use align-items, we are aligning them inside the flex container, on the cross axis. The main axis is the one defined by the flex-direction property. In this first example, the main axis is the row; we are then stretching the items on the cross axis to the height of the flex container. The height of the flex container is, in this case, determined by the item with the most content.

對於 flexbox，當咱們使用align-itmes時，咱們是將它們在 flex 容器中的十字軸上對齊。主軸由 flex-direction屬性定義。在這個例子中，主軸是 row；而後咱們十字軸上的項目延伸到容器的高度。在這種狀況下，flex 容器的高度由 flex 項的最大高度決定。

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中看到這些屬性和值。

<p data-height="265" data-theme-id="light" data-slug-hash="PzGJzm" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox Alignment flex-direction: row" class="codepen">See the Pen Flexbox Alignment flex-direction: row by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

We can display flex items as a column rather than a row. If we change the value of flex-direction to column, then the main axis becomes the column, and the cross axis is along the row — align-items is still stretch by default, and so stretches the items across row-wise.

咱們能夠將 flex 項按照列擺放而不是行。若是咱們將flex-direction的值設置成column，而後主軸變成column，橫軸沿着 row——align-items依舊是默認值stretch，因此在每一行上拓展 flex 項。

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。可是要看到這些效果，容器須要足夠的高度！

<p data-height="265" data-theme-id="light" data-slug-hash="JKRrvY" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox Alignment flex-direction: column" class="codepen">See the Pen Flexbox Alignment flex-direction: column by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

ALIGNMENT IN GRID LAYOUT 網格佈局中的對齊

In a grid layout, the behavior is similar, except that we are aligning items within the defined grid area. In flexbox, we talk about the main and cross axis; with grids, we use the terms 「block」 or 「column axis」 to describe the axis defining our columns, and 「inline」 or 「row axis」 to describe the axis defining our rows, as defined in the specification.

在網格佈局中，對齊的行爲是類似的，除了在定義的網格區域對去 grid 項。在 flexbox 中，咱們討論的是主軸和橫軸；在網格中，咱們用「block」或者「column axis（列軸）」的說法來描述列中定義的軸，用「inline」和「row axis（橫軸）」的說法來描述行中定義的軸，好比defined in the specification

We can align content inside a grid area using the properties and values described in the box alignment specification.

咱們可使用 box alignment 中定義的屬性和值來對齊一個網格區域中的內容。

A grid area is one or more grid cells. In the example below, we have a four-column and four-row track grid. The tracks are separated by a grid gap of 10 pixels, and I have created three grid areas using line-based positioning. We’ll look at this positioning properly later in this guide, but the value before the / is the line that the content starts on, and the value after where it ends.

一個網格區域能夠是一個或者更多網絡單元格。在下面的例子中，咱們有四行四列的通道網格。這些軌道之間有一個10像素的分割間隙，同時以線爲基礎建立了是三個網格區域，並放在合適的位置。稍後咱們會在這個指南中看看這個正確的位置。/前面的數字表示的是內容在這一行的起點，後面的數字表示的是內容在何處結束（譯者注：千萬別當作五分之一來看待，這裏的意思是，內容從第一列開始，到第五列結束）。

<p data-height="265" data-theme-id="light" data-slug-hash="EygpMv" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid Alignment: align-items and justify-items" class="codepen">See the Pen Grid Alignment: align-items and justify-items by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

The dotted border is on a background image, to help us see the defined areas. So, in the first example, each area uses the defaults of stretch for both align-items on the column axis and justify-itemson the row axis. This means that the content stretches to completely fill the defined area.

虛線邊框是背景圖中的，幫助咱們看到定義的區域。那麼，在第一個例子中，每一個區域在列軸上使用stretch做爲align-items的默認值，在行軸上使用justify-items。這意味着內容會延伸到徹底填充定義的區域。

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。

<p data-height="265" data-theme-id="light" data-slug-hash="aZBozX" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid Alignment: aligning the grid" class="codepen">See the Pen Grid Alignment: aligning the grid by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

In the first example, we see the default alignment of a grid where the columns and rows have been defined in absolute units and take up less space than the fixed-sized wrapper allows for. The default values for both are start.

在第一個例子中，咱們能夠看到網格的默認佈局，行和列都被定義在絕對大小單位中，佔據的空間比固定大小的包裝器容許的空間更小。align-content和justify-content的默認值都是start。

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像素。把這個應用到咱們的卡片不居中，能夠獲得下面的這個例子。

<p data-height="265" data-theme-id="light" data-slug-hash="gMLrEG" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox: flex properties" class="codepen">See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

Our flex-basis here is 300 pixels, and we have three cards in a row. If the flex container is wider than 900 pixels, then the remaining space is divided into three and distributed between the items equally. This is because we have set flex-grow to 1 so that our items can grow from the flex-basis. We have also set flex-shrink to 1, which means that, where we don’t have space for three 300-pixel columns, space will be removed equally.

flex-basis在這裏是300像素，咱們三個卡片是在一行的。若是 flex 容器比900像素寬，那麼剩下的空間會平均分配三個卡片之。這是由於咱們設置了flex-grow爲1，因此項會在flex-basis的基礎上擴大。咱們也設置了flex-shrink爲1，這一位置若是三個300像素的列之間沒有足夠的空間，項之間的空間會被移除。

If we want these items to grow in different proportions, then we can change the flex-grow value on one or more items. If we would like the first item to get three times the available space distributed to it, we would set flex-grow to 3.

若是咱們想這些項以不一樣的比例擴大，咱們能夠修改一個或者更多項的flex-grow，若是咱們想第一個項在空間足夠時變成三倍，咱們將設置 flex-grow爲3。

<p data-height="265" data-theme-id="light" data-slug-hash="NrbNmz" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox: flex properties" class="codepen">See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

The available space is distributed after the amount needed for flex-basis has been taken into account. This is why our first item is not three times the size of our other items, but instead gets a share of three parts of the remaining space. You will see a bigger change by setting the value for flex-basis to 0, in which case we wouldn’t have a starting value to remove from the overall container. Then, the entire width of the container could be distributed in proportion to our items.

可用空間是在flex-basis被考慮須要的空間大小以後分配的。這就是爲何咱們的第一項不是擴大原來的三倍，而是三個卡片的剩餘空間。將 flex-basis設置成0你將看到一個更大的變化。在這種狀況下，咱們沒有一個從整個容器中移除的初始值。而後整個容器的寬度都將按比例分配給各項。

<p data-height="265" data-theme-id="light" data-slug-hash="jrVqoQ" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox: flex properties" class="codepen">See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

A very useful tool to help you understand these values is Flexbox Tester. Pop the different values into the tester, and it calculates the actual sizes at which your items will end up, and explains why they end up at that size.

Flexbox Tester 是一個幫助你理解這些值的很是好用的工具。

If you use auto as your flex-basis value, it will use any size set on the flex item as the flex-basis value. If there is no size, then it defaults to be the same as the value of content, which is the content’s width. Using auto is, therefore, very useful for reusable components that might need to have a set size on an item. You can use auto and be sure that if the item needs to be around a size defined on it, flexbox will respect it.

若是你使用auto做爲flex-basis的值，這將會使用任何大小來設置 flex 項，就像flex-basis的值。若是沒有大小，那麼默認值是內容的寬度。對於那些沒有定義大小的可複用組件，使用auto很是有用的。你可使用auto來確保項的大小是否和定義的差很少。

In the next example, I have set the flex-basis on all cards to auto. I then gave the first card a width of 350 pixels. So, the flex-basis of that first card is now 350 pixels, which is used to work out how to distribute space. The other two cards have a flex-basis based on their content’s width.

在下一個例子中，我把全部的卡片的flex-basis設置成auto。而後我給第一個卡片設置寬度爲350像素。那麼第一個卡片的flex-basis如今是350像素，用來解決如何分配空間。其餘兩個卡片的flex-basis基於他們的內容的寬度。

<p data-height="265" data-theme-id="light" data-slug-hash="mEOPZM" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox: flex properties" class="codepen">See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

If we go back to our original flex: 1 1 300px, add more items to our example and set flex-wrap: wrap on the container, the items will wrap in order to maintain as near as possible the flex-basis value. If we have five images and three fit onto one row, then the next two will wrap onto a new row. As the items are allowed to grow, they both grow equally, and so we get two equal-sized items on the bottom row and three in the row above.

若是咱們回到flex: 1 1 300px，在咱們的例子中添加更多項，而且在容器上設置flex-wrap: wrap，這些項爲了儘量地維持 flex-basis的值而換行。若是咱們有五個項，三個佔據一行，那麼接下來的兩個將會換行到行的一行中。由於這些項都是容許擴大的，因此他們也會平均地擴大。因此在底部一行咱們會有兩個相同大小的項，上面一行有三個。

<p data-height="265" data-theme-id="light" data-slug-hash="QEGNeZ" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox: wrapping" class="codepen">See the Pen Flexbox: wrapping by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

The question then asked is often, 「How can I get the items on the bottom row to line up with the ones on the top, leaving a gap at the end?」 The answer is that you don’t, not with flexbox. For that kind of behavior you need a grid layout.

那麼問題來了，「我怎麼作才能讓最後一行像頂部同樣排列，在末尾留下空隙？」這個回答是，你別，別用 flexbox。對於這種行爲，你須要網格佈局（譯者注：其實能夠在後面加上n個看不見不佔據空間的卡片，n爲每行的卡片個數）。

KEEPING THINGS IN PROPORTION WITH GRID LAYOUT

Grid layouts, as we have already seen, have a concept of creating column and row tracks into which items can be positioned. When we create a flexible grid layout, we set the proportions when defining the tracks on the grid container — rather than on the items, as with flexbox. We encountered the fr unit when we created our grids earlier. This unit works in a similar way to flex-grow when you have a flex-basisof 0. It assigns a fraction of the available space in the grid container.

網格佈局，正如咱們所見，有這個概念：建立列和行軌道，項能夠在裏面定位。當咱們建立一個彈性的網格佈局時，咱們在 grid 容器中定義軌道時設置比例——而不是在項上，就像 flexbox 同樣。在咱們以前建立網格時，遇到了fr單位，這個單位以和 flex-grow類似的方式工做，就像 flex-basis: 0。它分配grid 容器中可用空間的一部分。

In this code example, the first column track has been given 2fr, the other two 1fr. So, we divide the space into four and assign two parts to the first track and one part each to the remaining two.

在這個例子中，第一列軌道分配了2fr，其餘兩個1fr。因此，咱們將空間分紅四份，兩份分配第一列軌道，其餘的軌道每一個分配一份。

<p data-height="265" data-theme-id="light" data-slug-hash="xOROVO" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Simple grid show fraction units" class="codepen">See the Pen Simple grid show fraction units by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

Mixing absolute units and fr units is valid. In this next example, we have a 2fr track, a 1fr track and a 300-pixel track. First, the absolute width is taken away, and then the remaining space is divided into three and assigned three parts to track 1 and one part to track 2.

混合使用絕對單位和 fr是有效的。在接下來的例子中，咱們有一個2fr的軌道，一個1fr的軌道和一個300像素的軌道。首先，絕對寬度被佔據，而後剩下的空間分紅三份，兩份給軌道1，一份給軌道2。

<p data-height="265" data-theme-id="light" data-slug-hash="rLWLLa" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid: Mixing absolute and fraction units" class="codepen">See the Pen Grid: Mixing absolute and fraction units by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

What you can also see from this example is that our items fit into the defined tracks — they don’t distribute across the row, as they do in the flexbox example. This is because, with grid layouts, we are creating a two-dimensional layout, then putting items into it. With flexbox, we get our content and work out how much will fit in a single dimension in a row or column, treating additional rows or columns as entirely new flex containers.

在這個例子中你還能夠看到，咱們的項恰好放入定義的軌道中——他們沒有跨行分配，就像在 flexbox 的例子同樣。這是由於，使用 grid 佈局是，咱們建立一個二維佈局，而後將項放在裏面。使用 flexbox 時，咱們解決了在一維空間中的行和列中內容如何適應，對待額外的行或者列就像是一個完整的新的 flex 容器。

What would be nice, however, is to still have a way to create as many columns of a certain size as will fit into the container. We can do this with grid and the repeat syntax.

這很 nice，然而依然有方法來建立不少肯定大小的列填滿容器。咱們可使用 grid和repeat語法來作這個。

In the next example, I will use the repeat syntax to create as many 200-pixel columns as will fit in our container. I am using the repeatsyntax for the track listing, with a keyword value of auto-fill and then the size that I want the repeated tracks to be.

在下面例子中，我將使用repeat語法來建立不少200像素的列來填入咱們的容器。

(At the time of writing, this was not implemented in Chrome, but works in Firefox Developer Edition.)

在寫文章的時候 Chrome 不支持，可是在 Firefx 的開發者版本中有效。

<p data-height="265" data-theme-id="light" data-slug-hash="Pzbzze" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid: As many 200 pixel tracks as will fit" class="codepen">See the Pen Grid: As many 200 pixel tracks as will fit by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

We can go a step further than that and combine fraction units and an absolute width to tell the grid to create as many 200-pixel tracks as will fit in the container and to distribute the remainder equally.

咱們能夠更遠的一步，結合fr 單位和絕對寬度來告訴網格建立不少200像素的軌道填充容器同時平均分配剩下的空間。

<p data-height="265" data-theme-id="light" data-slug-hash="EyNyNK" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid: As many 200 pixel tracks as will fit, distribute remain space evenly" class="codepen">See the Pen Grid: As many 200 pixel tracks as will fit, distribute remain space evenly by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

In this way, we get the benefits of a two-dimensional layout but still have flexible quantities of tracks — all without using any media queries. What we also see here is the grid and flexbox specifications diverging. Where flexbox ends with distributing items in one dimension, grid is just getting started.

在這種方式下，咱們既獲得了二維佈局的好處同時依舊擁有彈性的軌道——全部的這些都沒有使用任何的媒體查詢。同時咱們還看到grid he flexbox 規格的區別。flexbox 在一維上以分配項目而結束，grid 則是剛剛開始。

A SEPARATION OF SOURCE ORDER AND VISUAL DISPLAY

With flexbox, we can’t do a lot in terms of positioning our flex items. We can choose the direction in which they flow, by setting flex-directionto row, row-reverse or column, column-reverse, and we can set an order, which controls the visual order in which the items display.

在 flexbox 在 flex項的定位上不能作太多的聲明。咱們能夠經過設置flex-direction成row，row-reverse或者column，column-reverse，而且咱們能夠設置順序，控制他們在視覺上的呈現順序。

<p data-height="265" data-theme-id="light" data-slug-hash="YWpWVE" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Flexbox: order" class="codepen">See the Pen Flexbox: order by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

With grid layouts, we get to properly position child items onto the grid we have defined. In most of the examples above, we have been relying on grid auto-placement, the rules that define how items we have not positioned are laid out. In the example below, I am using line-based positioning to position the items on the grid.

在網格佈局中，咱們實現了網格中子項的正肯定位。在上面大多數的例子中，咱們依賴網格的自動佈局，這個規則是如何定義咱們沒有定位的項的咱們並無展開。在下面的例子中，我使用基於行的定位來定位網格中的項。

The grid-column and grid-row properties are a shorthand for grid-column-start, grid-row-start, grid-column-end and grid-row-end. The value before the / is the line that the content starts on, while the value after is the line it ends on.

grid-colum 和 grid-row 屬性是 grid-column-start，grid-row-start，grid-column-end 和 grid-row-end 的簡寫形式。/前面的值是線中內容開始的地方，後面的值是線結束的地方。

<p data-height="265" data-theme-id="light" data-slug-hash="rLWLwO" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid: line-based positioning" class="codepen">See the Pen Grid: line-based positioning by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

You can also name your lines. This happens when you create your grid on the grid container. Name the lines in brackets, and then position the items as before but using the names instead of the line index.

你也能夠命名你的線。當你在 gird 容器中建立你的網格時會發生。在方括號中給線命名，而後想以前同樣定位項，可是使用名字而不是線的索引。

<p data-height="265" data-theme-id="light" data-slug-hash="aZBZEB" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid: line-based positioning, named lines" class="codepen">See the Pen Grid: line-based positioning, named lines by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...

You can have multiple lines with the same name, and then target them by line name and index.

你能夠有不少重名的線，而後經過線的名字和索引指向它們。

You can use a span keyword, spanning a number of lines or, for example, to the third line named col. This type of positioning is useful for creating components that sit in various places in the layout. In the example below, I want some elements to span six column tracks and others to span three. I am using auto-placement to lay out the items, but when the grid encounters an item with a class of wide, the start value will be auto and the end value will be span 2; so, it will start on the line it would normally start on based on the auto-placement rules, but span two lines.

你可使用一個 span 關鍵字，來跨過必定數量的線，好比，第三條線名字叫作 col，這種類型的定位用來建立在佈局中不一樣地方的組件是十分有用的。在下面的例子中，我但願一些元素橫跨六列軌道其餘的元素橫跨三列。我使用自動佈局來放置項，可是當網格遇到一個帶有 wide 類的項時，開始的值將會變成自 auto，而且結束值將會是 span2。因此它會基於自動佈局從線的起點開始，可是橫跨兩條線。

<p data-height="265" data-theme-id="light" data-slug-hash="LZbZdj" data-default-tab="result" data-user="rachelandrew" data-embed-version="2" data-pen-title="Grid: multiple lines with the same name" class="codepen">See the Pen Grid: multiple lines with the same name by rachelandrew (@rachelandrew) on CodePen.</p>
<script async src="https://production-assets.cod...