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”!

而且，如果您认为这可以帮助与您处于同一位置的其他人，请给它一个“心脏”！