css flexbox模型

by Kevin Kononenko

凱文·科諾年科(Kevin Kononenko)

CSS Flexbox在全國范圍內的公路旅行中得到了解釋 (CSS Flexbox Explained by Road Tripping Across the Country)

如果您旅行很長，那么您可以了解CSS Flexbox！ (If you have ever been on a long roadtrip, then you can understand CSS Flexbox!)

The popular Flexbox model attempts to replace the giant pain known as CSS “floats”. Unfortunately, it also introduces yet another entirely new system into CSS. And you thought there were enough already!

流行的Flexbox模型試圖替代稱為CSS“ floats ”的巨大痛苦。不幸的是，它還在CSS中引入了另一個全新的系統。而且您認為已經足夠了！

Actually, the grid-oriented nature of Flexbox makes much more sense than constantly juggling your “float” and “block/inline-block” values.

實際上，Flexbox面向網格的本質比不斷調整“ float”和“ block / inline-block”值有意義得多。

There are already a couple good resources out there, like Flexbox Tower Defense and this more technical guide.

已經有一些不錯的資源，例如Flexbox塔防和此更多技術指南。

In this article, I’ll take the route of explaining the Flexbox system through one of my favorite types of vacations… the road trip!

在本文中，我將通過我最喜歡的一種度假方式-公路旅行，來說明Flexbox系統！

That’s right — we’re going to use the entire United States in this analogy.

沒錯-我們將以此類推來使用整個美國。

The US actually has a grid-oriented interstate highway system that spans East-West and North-South.

實際上，美國擁有跨東西向和南北向的以網格為導向的州際公路系統。

While this map is geographically accurate, it’s pretty hard to understand. So let’s try that again.

盡管這張地圖在地理上是準確的，但很難理解。因此，讓我們再試一次。

In this scenario, you must primarily travel along a one-directional path.

在這種情況下， 您必須主要沿著單向路徑行駛 。

For example, you might take the route from Seattle to Boston which only includes west to east. Or, you might take the route from Seattle to San Diego, which only covers north to south.

例如，您可能選擇了從西雅圖到波士頓的路線，其中僅包括西到東。或者，您可能會選擇從西雅圖到圣地亞哥的路線，該路線僅覆蓋北到南。

Since the default position is top left, we’ll start from Seattle. You’ll get a chance to add side trips to your road trip towards the end! This is important because it imitates the flow of <div>s within their container.

由于默認位置在左上方，因此我們將從西雅圖開始。您將有機會在旅途中添加旁行路線！這很重要，因為它模仿了<div>在其容器中的流動。

Let’s hit the road!

讓我們上路吧！

flex-direction：您旅行的方向 (flex-direction: The direction of your trip)

Flex-direction determines the direction of elements within a container <div> with “display:flex;”. The default value is “row”, which means from left to right. No surprises there.

伸縮方向使用“ display：flex;”確定容器<div>中元素的方向。默認值為“行”，表示從左到右。沒有驚喜。

Let’s say you’re starting in Seattle, and taking a trip to Boston. That trip might look like this in HTML:

假設您要從西雅圖開始，然后去波士頓旅行。該行在HTML中可能如下所示：

This assumes that you’re making stops at Yellowstone, Mount Rushmore and Chicago. Here is a timeline view, assuming you stop for 2 days at each location.

假設您要在黃石公園，拉什莫爾山公園和芝加哥停留。這是時間軸視圖，假設您在每個位置停留2天。

And what if you are using “flex-direction:column;”? That means that your <div>s will align from top to bottom. Now, you’re going from Seattle to San Diego. Stops along the way might be Portland, San Francisco and Los Angeles.

如果您使用的是“ flex-direction：column;”，該怎么辦？這意味著您的<div>將自上而下對齊。現在，您要從西雅圖到圣地亞哥。一路上的站點可能是波特蘭，舊金山和洛杉磯。

證明內容：您在旅途中如何安排停留地點 (justify-content: How you space your stops along the trip)

Alright, let’s return to the Seattle to Boston trip. With Flexbox, we can decide how our child <div>s spread out along the width of the container. So, if you are on a road trip, you may not necessarily evenly space out your stops. You might stop more frequently at the beginning, or at the end.

好了，讓我們回到西雅圖到波士頓的旅程。使用Flexbox，我們可以決定子<div>沿容器的寬度分布的方式。因此，如果您在旅途中，不一定會均勻地停下來。您可能會在開始或結束時更頻繁地停止。

The default value for justify-content is “flex-start”, which means your <div>s spread from the left-most side. This is similar to choosing to do all of your stops on the roadtrip at the beginning. This would include places like Glacier National Park, Yellowstone and Mount Rushmore.

justify-content的默認值為“ flex-start ”，這意味著您的<div>從最左側展開。這類似于選擇一開始在旅途中的所有停留。其中包括冰川國家公園，黃石公園和拉什莫爾山。

On a map:

在地圖上：

Okay, this is admittedly a little unrealistic. You probably would not want to drive 20 hours from South Dakota straight to Boston. The same could be said of “flex-end”, when all of the <div>s hug the right side of the container. This would include stops at places like the wonderful city of Cleveland, Niagara Falls and the MLB Hall of Fame.

好的，這無疑是不現實的。您可能不希望從南達科他州開車直達波士頓20小時。當所有<div>都擁抱容器的右側時，“ flex-end ”也可以這樣說。這將包括在美麗的克利夫蘭市，尼亞加拉大瀑布和美國職業棒球大聯盟名人堂等地方停留。

On map:

在地圖上：

Another example is “center”, where the <div>s align themselves to the middle of the container <div>. That would mean visits to Mount Rushmore, the Mall of America in Minnesota and Chicago.

另一個示例是“ center ”，其中<div>使其與容器<div>的中間對齊。那將意味著參觀拉什莫爾山，明尼蘇達州和芝加哥的美國購物中心。

align-items：您想在全國穿哪條公路？ (align-items: Which highway do you want to take across the country?)

Alright, so far we have mainly been discussing the northern route across the country. In HTML terms, that means we are just going along the top of the <div>. But, one magical property of Flexbox is that we can easily move to the middle or bottom of the <div> without any CSS trickery.

好吧，到目前為止，我們主要討論的是橫跨美國的北部路線。用HTML術語來說，這意味著我們只是在<div>的頂部。但是，Flexbox的一項神奇特性是，我們可以輕松地移至<div>的中間或底部，而無需任何CSS技巧。

The align-items property defaults to “flex-start”, but if we change that to “center”, our <div>s will vertically align to the center of the container. This is kind of like starting your road trip in San Francisco, heading over to Las Vegas, then Denver, then St. Louis and ending in Washington D.C.

align-items屬性默認為“ flex-start”，但是如果將其更改為“ center ”，則我們的<div>將垂直對齊容器的中心。這有點像在舊金山開始您的公路旅行，然后前往拉斯維加斯，然后是丹佛，然后是圣路易斯，然后在華盛頓特區結束

Here’s the map:

這是地圖：

And, in HTML:

并且，在HTML中：

If you wanted to set your align-items value to “flex-end”, your <div>s would align to the bottom of the container. You would be taking the southern route across the United States, and stopping in places like Sedona, Austin and New Orleans before ending in Jacksonville.

如果要將align-items值設置為“ flex-end ”，則<div>將與容器的底部對齊。您將沿美國南部路線行駛，然后在塞多納，奧斯丁和新奧爾良等地停留，然后在杰克遜維爾結束。

自我調整：在另一條高速公路上停下來 (align-self: Have one stop on a different highway route)

You can apply “align-self” to individual child <div>s in order to have them move vertically within the container, regardless of the align-items property. So if you are taking the trip from Seattle to Boston, you can make a stop in Las Vegas, which is in the middle of the country. Then you can continue on to Mount Rushmore or wherever else on the normal horizontal flow.

您可以將“ align-self”應用于單個子<div>，以使它們在容器中垂直移動，而不管align-items屬性如何。因此，如果您從西雅圖到波士頓旅行，可以在美國中部的拉斯維加斯停留。然后，您可以繼續前往拉什莫爾山(Mount Rushmore)或正常水平流動的其他任何地方。

順序：按特定順序停靠 (order: Make your stops in a specific order)

So far, every stop has corresponded with the order of the elements in the HTML. In other words, if the Mount Rushmore stop is specified third in the HTML, that means it will be the third stop on the road trip.

到目前為止，每個停止都與HTML中元素的順序相對應。換句話說，如果在HTML中將拉什莫爾山站指定為第三站，則這將是旅途中的第三站。

The “order” property is a numerical value that allows us to change the order of the HTML elements. Without Flexbox, we would need to use a confusing series of floats, or just change the HTML.

“ order”屬性是一個數值，使我們可以更改HTML元素的順序。如果沒有Flexbox，我們將需要使用一系列令人困惑的浮點數，或者僅更改HTML。

With “order”, we can turn around on our road trip and visit a place that is not on the way to the end point. Would you do this in real life? Only if you enjoy an extra 15 hours in the car!

使用“訂單”，我們可以繞開公路旅行，并前往未到達終點的地方。您會在現實生活中這樣做嗎？僅在您享受額外15個小時的車程時！

Let’s say we’re taking the northern trip, Seattle to Boston. Here’s that HTML again.

假設我們正在北行，從西雅圖到波士頓。這又是HTML。

But, after starting in Seattle, we want to first go to South Dakota for the world’s largest square dance festival. We would use the “order” property to make sure the Mount Rushmore visit comes right after Seattle.

但是，從西雅圖開始之后，我們想先去南達科他州參加世界上最大的廣場舞蹈節。我們將使用“ order”屬性來確保拉什莫爾山的訪問恰好在西雅圖之后。

Order defaults to 0, so we might want to give seattleVisit a value of -2, and mountRushmoreVisit a value of -1 to make sure it comes 2nd. Then the rest of the elements will follow in a normal flow.

Order默認為0，因此我們可能要給seattleVisit賦予-2的值，并為mountRushmoreVisit賦予-1的值以確保它排在第二位。然后，其余元素將按照正常流程進行。

Notice — this is now strictly a timeline view, not using the geographic order as the other maps were using.

注意-現在嚴格來說，這是一個時間軸視圖，沒有像其他地圖一樣使用地理順序。

結論 (Conclusion)

Time for a little quiz! Here are some sample destinations, in HTML.

時間小測驗！這是HTML中的一些示例目標。

But, if the following is your planned route… what would the CSS need to look like?

但是，如果以下是您計劃的路線，那么CSS需要什么樣？

Start in San Francisco
從舊金山開始
2nd stop: Las Vegas
第二站：拉斯維加斯
3rd Stop: Mount Rushmore
第三站：拉什莫爾山
4th Stop: Backtrack to Denver
第四站：回丹佛
End by driving all the way to Washington D.C
一路駛向華盛頓特區結束

The answer:

答案：

Here’s the reasoning behind this:

這是其背后的原因：

4 out of 5 items are along our central route, so we “align-items” to center.
5個項目中有4個位于我們的中心路線上，因此我們將“項目對齊”到中心。
The three stops are generally in the middle of the United States from a West-East perspective, so we “justify-content” to center as well.
從東西方的角度來看，這三個站點通常位于美國中部，因此我們也將“合理化內容”定為中心。
Mount Rushmore is on the northern route, so we use align-self on that one <div>.
拉什莫爾山(Mount Rushmore)位于北部路線，因此我們在該<div>上使用align-self 。
The order CSS property is why we must backtrack to Denver, and why our actual trip does not follow the order of the children <div>s in the HTML. Order allows us to change the sequence of <div>s. In this case, we move Denver to the second to last stop, so we must give it an order greater than 0, but less than the order of the final <div> so that we still end in D.C.
CSS 順序屬性是為什么我們必須回溯到丹佛的原因，以及為什么我們的實際旅行沒有遵循HTML中子元素<div>的順序。 Order允許我們更改<div>的順序。在這種情況下，我們將丹佛移至倒數第二個停靠點，因此我們必須給它一個大于0但小于最后一個<div>的順序的順序，以便我們仍以DC結尾

If you enjoyed this post, you may also enjoy my other explanations of challenging CSS and JavaScript topics, such as positioning, Model-View-Controller, and callbacks.

如果您喜歡這篇文章，那么您可能還會喜歡我對具有挑戰性CSS和JavaScript主題的其他解釋，例如定位，Model-View-Controller和回調。

And if you think this might help other people in the same position as you, give it a “heart”!

而且，如果您認為這可以幫助與您處于同一位置的其他人，請給它一個“心臟”！