-ms-flexbox_有关Flexbox的工作原理的更多信息-以大而生动的Gif动画进行解释

-ms-flexbox

by Scott Domes

由斯科特·多姆斯(Scott Domes)

有关Flexbox的工作原理的更多信息-以大而生动的Gif动画进行解释 (Even more about how Flexbox works — explained in big, colorful, animated gifs)

Last time we got started with the basic Flexbox properties: flex-direction, justify-content, align-items, and align-self.

上一次我们开始使用Flexbox的基本属性：flex-direction，justify-content，align-items和align-self。

These commands are powerful for creating basic layouts. But once you start building webpages with Flexbox, you’ll need to go deeper to maximize its potential.

这些命令对于创建基本布局非常有用。 但是，一旦开始使用Flexbox构建网页，就需要更深入地发挥其潜力。

Now let’s take a deep look into Flexbox sizing — and how you can leverage it to build adaptable and beautiful layouts.

现在，让我们深入了解Flexbox的大小，以及如何利用它来构建适应性强的精美布局。

属性1：弹性基础 (Property 1: Flex-Basis)

In the last article, we mostly looked at properties that apply to container elements. This time, we’re exclusively going to examine sizing applied to child elements.

在上一篇文章中 ，我们主要研究了适用于容器元素的属性。 这次，我们将专门研究应用于子元素的大小调整。

Our first property is, in my opinion, one of the least well-explained properties in Flexbox tutorials.

在我看来，我们的第一个属性是Flexbox教程中解释最少的属性之一。

But — don’t worry. It’s actually quite straightforward.

但是-不用担心。 实际上非常简单。

Flex-basis controls the default size of an element, before it is manipulated by other Flexbox properties (more on that later).

Flex-basis控制元素的默认大小， 然后再由其他Flexbox属性对其进行操作 (稍后会详细介绍)。

In the below GIF, this means it is interchangeable with the width property:

在下面的GIF中，这意味着它可以与width属性互换：

What makes flex-basis unique from width, however, is that it corresponds to our good ol’ flex axes:

但是，使flex-basis在宽度上与众不同的原因在于它与我们良好的ol'flex轴对应：

Flex-basis affects an element’s size across the main axis.

伸缩基础会影响元素在主轴上的大小。

Let’s see what happens when we keep our flex-basis the same, but switch the direction of our main axis:

让我们看看当我们保持flex-basis不变但切换主轴方向时会发生什么：

Note that we had to switch from setting the height manually to setting the width. Flex-basis thus alternately determines width or height, depending on flex-direction.

请注意，我们必须从手动设置高度切换为设置宽度。 因此，基于挠性的基础取决于挠性方向来交替确定宽度或高度。

物业2：弹性成长 (Property 2: Flex Grow)

Now we’re going to get a bit more complex.

现在，我们将变得更加复杂。

First, let’s set all our squares to the same width, 120px:

首先，让我们将所有正方形设置为相同的宽度120px：

Now, when it comes to the property called flex-grow, the default is 0. That means the squares are not allowed to grow to take up the space in the container.

现在，当涉及到名为flex-grow的属性时，默认值为0 。 这意味着不允许正方形扩大以占用容器中的空间。

What does that mean? Well, let’s try incrementing flex-grow to 1 for every square:

那是什么意思？ 好吧，让我们尝试将每个正方形的flex-grow增加到1 ：

The squares collectively take up the entire width of the container, with the space evenly distributed among them. The flex-grow value overrides the width.

正方形共同占据了容器的整个宽度，并且空间在其中均匀分布。 flex-grow值将覆盖宽度。

The confusing part about flex-grow, however, is what the value actually means. What does flex-grow: 1 actually imply?

然而，关于弹性增长的困惑之处在于价值的实际含义。 flex-grow：1实际上意味着什么？

Well, here’s what it looks like if we set the flex-grow of each square to 999:

好吧，如果我们将每个正方形的弹性增长设置为999，则如下所示：

It is… exactly the same.

是……完全一样。

That’s because flex-grow is not an absolute value — it’s a relative value.

这是因为flex-grow不是绝对值，而是相对值。

What matters is not what a square’s flex-grow value is on its own, but what it is in relation to the other squares.

重要的不是正方形的弹性增长值本身是什么 ，而是与其他正方形有关的值。

If we set every square to flex-grow: 1, and then adjust Square #3’s flex-grow, then we see the changes:

如果我们将每个正方形设置为flex-grow：1，然后调整Square＃3的flex-grow，那么我们将看到更改：

To really understand what’s going on here, let’s take a quick detour into some (simple) math.

为了真正理解这里发生的事情，让我们快速绕开一些(简单的)数学。

Each square starts with a flex-grow of 1. If we add up the flex-grow of each square, our total is six. The container is thus divided into 6 separate sections. Each square grows to fill 1/6 of the available space in the container.

每个正方形以1的弹性增长开始。如果我们将每个正方形的弹性增长相加，则总数为6。 因此，该容器分为6个独立的部分。 每个正方形会增长为填充容器中可用空间的1/6。

When we set the flex-grow of Square #3 to 2, the container is now divided into 7 different sections, since the total of the flex-grow properties is 1 + 1 + 2 + 1 + 1 + 1.

当将Square＃3的flex-grow设置为2时，容器现在被分为7个不同的部分，因为flex-grow属性的总和为1 +1 + 2 +1 +1 + 1。

Square #3 then gets 2/7 of that space, and the rest get 1/7.

然后，第3平方获得该空间的2/7，其余的获得1/7。

When we go to flex-grow: 3 for Square #3, the container is divided into 8 sections (1 + 1 + 3 + 1 + 1 + 1) and Square #3 gets 3/8, and the rest get 1/8.

当我们进行flex-grow时：Square＃3的3，将容器分为8个部分(1 + 1 + 3 +1 + 1 +1)，Square＃3得到3/8，其余的得到1/8 。

And so on.

等等。

Flex-grow is all about proportions. If we set every square to flex-grow: 4, and square #3 to flex-grow: 12, we get the same result as if it were 1 and 3, respectively:

灵活成长只不过是比例 。 如果我们将每个正方形都设置为flex-grow：4，将正方形＃3设置为flex-grow：12，我们将得到与分别为1和3时相同的结果：

What matters is what each square’s flex-grow is proportional to the others.

重要的是每个方格的弹性增长与其他方格成正比。

As a final note, remember that just like flex-basis, flex-grow applies across the main axis. Our squares will grow width-wise only, unless we set the flex-direction to column.

最后，请记住，就像flex-basis一样，flex-grow沿主轴应用。 除非将flex-direction设置为column，否则我们的正方形只会沿宽度方向增长。

特性3：弹性收缩 (Property 3: Flex Shrink)

Flex-shrink is the opposite of flex-grow, determining how much a square is allowed to shrink.

Flex-shrink与flex-grow相反，它确定允许平方缩小多少。

It only comes into play if the elements must shrink to fit into their container — i.e. when the container is just too small.

仅当元素必须收缩以适合其容器时才起作用(即，当容器太小时)。

Its main use is to specify which items you want to shrink, and which items you don’t. By default, every square has a flex-shrink of 1 — which means it will shrink as the box contracts.

它的主要用途是指定要收缩的项目，而不要收缩的项目。 默认情况下，每个正方形的flex-shrink值为1，这意味着它将随着盒子收缩而收缩。

Let’s see it in action. In the below GIFS, the squares have a flex-grow of 1, so they fill the container, and a flex-shrink of 1, so they’re permitted to shrink as it does.

让我们来看看它的作用。 在下面的GIFS中，正方形的flex-grow为1，所以它们填充了容器，而flex-shrink为1，因此允许它们像它一样收缩。

Now let’s set the flex-shrink of Square #3 to 0. It’s forbidden to shrink, so it while it grows to fit the container, it refuses to dip below its set 120px width.

现在，将Square＃3的flex-shrink设置为0。禁止收缩，因此当它增长到适合容器时，它拒绝浸入其设置的120px宽度以下。

The default value for flex-shrink is 1 — that means your elements will shrink until you tell them not to!

flex-shrink的默认值为1-这意味着您的元素将缩小，直到您告诉他们不要！

Again, flex-shrink is about proportions. If one box has flex-shrink of 6, and the rest have flex-shrink of 2, the one box will shrink 3x as fast as the rest, as space compresses.

同样，弯曲收缩大约是一定比例。 如果一个盒子的flex-shrink值为6，其余盒子的flex-shrink值为2，则由于空间压缩，一个盒子的收缩速度将是其余盒子的3倍。

Note the wording there: the square with a 3x flex-shrink will shrink 3x as fast. This does not mean it will shrink 1/3 of the width.

请注意此处的措辞：具有3倍柔韧性收缩的正方形将以3倍速收缩。 这并不意味着它将缩小宽度的1/3。

In a moment, we’re going to dive deeper into how much things shrink and grow. But first, let’s get to our last property, and bring everything together.

稍后，我们将更深入地研究缩小和增长的数量。 但是首先，让我们进入最后一个属性，并将所有内容组合在一起。

属性4：Flex (Property 4: Flex)

Flex is shorthand for grow, shrink, and basis — all put together.

Flex是增长，收缩和基础的简写-全部组合在一起。

It defaults to 0 (grow) 1 (shrink) and auto (basis).

默认为0(增长)1(缩小)和自动(基本)。

For our last example, let’s simplify down to two boxes.

对于我们的最后一个示例，我们将其简化为两个方框。

Here are their properties:

这是它们的属性：

.square#one {  flex: 2 1 300px;}

.square#two {  flex: 1 2 300px;}

Both have the same flex-basis. That means if there’s enough space for both of them (the container is 600px plus room for margins and padding), they will both be 300px wide.

两者具有相同的flex-basis。 这意味着如果两者都有足够的空间(容器为600px，再加上边距和填充的空间)，则两者的宽度均为300px。

But as the box grows, Square 1 (with the higher flex-grow) will grow twice as fast. As the box contracts, Square 2 (with the higher flex-shrink) will shrink twice as fast.

但是随着盒子的增长，Square 1(具有更高的弹性增长)将以两倍的速度增长。 当盒子收缩时，Square 2(具有较高的柔韧性)将以两倍的速度收缩。

All together now:

现在都在一起了：

事物如何收缩和成长 (How Things Shrink And Grow)

Here’s what might be confusing: when Square 1 grows, it doesn’t grow to be twice as big as Square 2. Likewise, when Square 2 shrinks, it doesn’t shrink to be half the size of Square 1 — even though the ratio of flex-shrink is 2 to 1.

这可能是令人困惑的：当Square 1增大时，它的大小不会变成Square 2的两倍。同样，当Square 2缩小时，它的大小也不会缩小到Square 1的一半。 flex-shrink的比例是2比1。

It’s not their size that is 2 to 1 or 1 to 2. It’s their rate of shrinking and growing.

不是它们的大小是2比1还是1比2。 它们的缩小和增长的速度。

一点数学 (A Little Math)

The starting size for the container is 640px. After accounting for 20px padding on each side of the container, this leaves enough room for both squares to revert to their flex-basis of 300px

容器的起始大小为640px。 在考虑了容器每侧的20px填充之后，这为两个正方形留出了足够的空间以恢复其300px的弹性基础

When the container is set to 430px, we’ve lost 210px of space. Square 1, with the flex-shrink of 1, loses 70px. Square 2, with the flex-shrink of 2, loses 140px.

当容器设置为430px时，我们损失了210px的空间。 正方形1的flex-shrink值为1，损失70px 。 正方形2的flex-shrink值为2，损失140px 。

When the container shrinks to 340px, we’ve now lost 300px of space. Square 1 loses 100px, Square 2 loses 200px.

当容器缩小到340px时，我们现在损失了300px的空间。 广场1输100像素 ，广场2失去200像素 。

The lost space is divvied up according to the ratio of their respective flex-shrinks (2 to 1).

损失的空间根据其相应的伸缩率(2：1)的比例进行划分。

It’s the same story with flex-grow. When the container grows to 940px, and we’ve gained 300px of space, Square 1 gets an extra 200px, and Square 2 gets an extra 100px.

flex-grow也是如此。 当容器增长到940px时，我们获得了300px的空间，Square 1获得额外的200px ，Square 2获得额外的100px 。

When it comes to flex properties, proportions are the name of the game.

关于弹性属性，比例是游戏的名称。

In the above GIF, you can see how the width adjusts according to the ratios, with the delta (∆) showing the difference from the flex-basis.

在上面的GIF中，您可以看到宽度如何根据比例进行调整，其中增量(∆)表示与柔韧性基准的差异。

结论 (Conclusion)

As a final recap: flex-basis controls how large an element will be along the main-axis before any growing or shrinking occurs. Flex-grow determines how much it will grow in proportion to sibling elements, and flex-shrink determines how much it will shrink.

作为最后的总结：flex-basis控制在发生任何增长或收缩之前元素沿着主轴的大小。 Flex-grow确定与同级元素成比例的增长量，而flex-shrink确定与同级元素成比例的增长量。

We have a few more Flexbox properties to cover — keep an eye out for that in the coming weeks.

我们还有更多Flexbox属性要覆盖-请密切注意接下来的几周。

Thanks so much for reading! The response to these articles has been overwhelming. I really appreciate everyone taking the time to read, reply, recommend and share!

非常感谢您的阅读！ 对这些文章的React是压倒性的。 非常感谢大家抽出时间阅读，回复，推荐和分享！

If there’s a particular concept (Flexbox or otherwise) that you’d like to see explained in a similar article, leave a reply or tweet me. You can also follow me on Twitter and Medium (by hitting the follow button below).

如果您希望在类似的文章中看到某个特定概念(Flexbox或其他)的解释，请留下回复或鸣叫我。 您也可以在Twitter和Medium中关注我(点击下面的“关注”按钮)。

翻译自: https://www.freecodecamp.org/news/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053/

-ms-flexbox