-ms-flexbox

by Scott Domes

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

Flexbox的工作原理-用大尺寸，彩色动画gif进行解释 (How Flexbox works — explained with big, colorful, animated gifs)

Flexbox promises to save us from the evils of plain CSS (like vertical alignment).

Flexbox承诺将使我们免受普通CSS的危害(例如垂直对齐)。

Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging.

好吧，Flexbox确实实现了这一目标。 但是，掌握其新的思维模式可能会充满挑战。

So let’s take an animated look at how Flexbox works, so we can use it to build better layouts.

因此，让我们看一下Flexbox的工作原理，以便我们可以使用它来构建更好的布局。

Flexbox’s underlying principle is to make layouts flexible and intuitive.

Flexbox的基本原理是使布局灵活直观。

To accomplish this, it lets containers decide for themselves how to evenly distribute their children — including their size and the space between them.

为了做到这一点，它可以让容器自己决定如何平均分配子对象-包括它们的大小和它们之间的空间。

This all sounds good in principle. But let’s see what it looks like in practice.

原则上，这听起来都不错。 但是，让我们看看实际情况。

In this article, we’ll dive into the 5 most common Flexbox properties. We’ll explore what they do, how you can use them, and what their results will actually look like.

在本文中，我们将介绍5个最常见的Flexbox属性。 我们将探讨它们的作用，如何使用它们以及它们的实际效果。

属性1：显示：Flex (Property 1: Display: Flex)

Here’s our example webpage:

这是我们的示例网页：

You have four colored divs of various sizes, held within a grey container div. As of now, each div has defaulted to display: block. Each square thus takes up the full width of its line.

您有四个大小不同的彩色div，位于一个灰色容器div中。 截至目前，每个div均默认display: block 。 因此，每个正方形占据其线的整个宽度。

In order to get started with Flexbox, you need to make your container into a flex container. This is as easy as:

为了开始使用Flexbox，您需要将容器变成Flex容器 。 这很简单：

#container {  display: flex;}

Not a lot has changed — your divs are displayed inline now, but that’s about it. But behind the scenes, you’ve done something powerful. You gave your squares something called a flex context.

并没有太大变化-您的div现在以内联方式显示，仅此而已。 但是在幕后，您做了一些有力的事情。 您为正方形提供了一种称为flex上下文的东西。

You can now start to position them within that context, with far less difficulty than traditional CSS.

现在，您可以开始将它们放置在该上下文中，而难度要比传统CSS小得多。

属性2：弹性方向 (Property 2: Flex Direction)

A Flexbox container has two axes: a main axis and a cross axis, which default to looking like this:

Flexbox容器有两个轴： 主轴和交叉轴 ，默认情况下看起来像这样：

By default, items are arranged along the main axis, from left to right. This is why your squares defaulted to a horizontal line once you applied display: flex.

默认情况下，项目沿主轴从左到右排列 。 这就是为什么在应用display: flex正方形默认为水平线的原因。

Flex-direction, however, let’s you rotate the main axis.

Flex-direction ，但是，让我们旋转主轴。

#container {  display: flex;  flex-direction: column;}

There’s an important distinction to make here: flex-direction: column doesn’t align the squares on the cross axis instead of the main axis. It makes the main axis itself go from horizontal to vertical.

这里有一个重要的区别： flex-direction: column不在十字轴而不是主轴上对齐正方形。 它使主轴本身从水平变为垂直。

There are a couple of other options for flex-direction, as well: row-reverse and column-reverse.

伸缩方向还有其他两个选项： 行反向和列反向。

属性3：证明内容合理 (Property 3: Justify Content)

Justify-content controls how you align items on the main axis.

对齐内容控制您如何在主轴上对齐项目。

Here, you’ll dive a bit deeper into the main/cross axis distinction. First, let’s go back to flex-direction: row.

在这里，您将更深入地了解主轴/十字轴的区别。 首先，让我们回到flex-direction：row。

#container {  display: flex;  flex-direction: row;  justify-content: flex-start;}

You have five commands at your disposal to use justify-content:

您可以使用五个命令来使用justify-content ：

1. Flex-start弹性启动
2. Flex-end弹性端
3. Center中央
4. Space-between间隔
5. Space-around周围空间

Space-around and space-between are the least intuitive. Space-between gives equal space between each square, but not between it and the container.

周围空间和中间空间最不直观。 空格之间的距离在每个正方形之间相等，但在正方形与容器之间却不相等。

Space-around puts an equal cushion of space on either side of the square — which means the space between the outermost squares and the container is half as much as the space between two squares (each square contributing a non-overlapping equal amount of margin, thus doubling the space).

围绕空间在正方形的两边都放有相等的空间缓冲-这意味着最外面的正方形和容器之间的间隔是两个正方形之间的间隔的一半 (每个正方形贡献了不重叠的相等余量，从而使空间加倍)。

A final note: remember that justify-content works along the main-axis, and flex-direction switches the main-axis. This will be important as you move to…

最后一点：请记住， justify-content沿主轴起作用 ，而flex-direction切换主轴 。 当您移至…时，这将很重要。

属性4：对齐项目 (Property 4: Align Items)

If you ‘get’ justify-content, align-items will be a breeze.

如果您“获得”辩解内容，那么对齐项目将变得轻而易举。

As justify-content works along the main axis, align-items applies to the cross axis.

当对齐内容沿主轴运行时， 对齐项将应用于交叉轴。

Let’s reset our flex-direction to row, so our axes look the same as the above image.

让我们将flex-direction重置为row，使我们的轴看起来与上图相同。

Then, let’s dive into the align-items commands.

然后，让我们深入了解align-items命令。

1. flex-start弹性启动
2. flex-end柔性端
3. center中央
4. stretch伸展
5. baseline基准线

The first three are exactly the same as justify-content, so nothing too fancy here.

前三个与justify-content完全相同，因此这里没有什么太花哨的。

The next two are a bit different, however.

接下来的两个有一点不同。

You have stretch, in which the items take up the entirety of the cross-axis, and baseline, in which the bottom of the paragraph tags are aligned.

您可以拉伸，其中项目占据整个横轴，而基线，则将段落标签的底部对齐。

(Note that for align-items: stretch, I had to set the height of the squares to auto. Otherwise the height property would override the stretch.)

(请注意，对于align-items: stretch ，我必须将正方形的高度设置为auto。否则，height属性将覆盖Stretch。)

For baseline, be aware that if you take away the paragraph tags, it aligns the bottom of the squares instead, like so:

对于基线，请注意，如果您删除了段落标签，它会对齐正方形的底部，如下所示：

To demonstrate the main and cross axes better, let’s combine justify-content and align-items and see how centering works different for the two flex-direction commands:

为了更好地演示主轴和横轴，让我们结合两端对齐的内容和对齐项，看看这两个弹性方向命令的居中如何不同：

With row, the squares are set up along a horizontal main axis. With column, they fall along a vertical main axis.

对于行，正方形沿着水平主轴设置。 使用立柱时，它们沿垂直主轴落下。

Even if the squares are centered both vertically and horizontally in both cases, the two are not interchangeable!

即使在两种情况下，正方形都在垂直和水平方向上居中，二者也不可互换！

属性5：自我对齐 (Property 5: Align Self)

Align-self allows you to manually manipulate the alignment of one particular element.

自我对齐允许您手动操纵一个特定元素的对齐。

It’s basically overriding align-items for one square. All the properties are the same, though it defaults to auto, in which it follows the align-items of the container.

它基本上是覆盖一个正方形的对齐项目 。 所有属性都是相同的，尽管默认为auto ，它遵循容器的align-items 。

#container {  align-items: flex-start;}

.square#one {  align-self: center;}// Only this square will be centered.

Let’s see what this looks like. You’ll apply align-self to two squares, and for the rest apply align-items: center and flex-direction: row.

让我们看看它是什么样子。 您将align-self应用于两个正方形，其余的将应用align-items: center和flex-direction: row 。

结论 (Conclusion)

Even though we’ve just scratched the surface of Flexbox, these commands should be enough for you to handle most basic alignments — and to vertically align to your heart’s content.

即使我们只是摸摸Flexbox的表面，这些命令也应该足以让您处理大多数基本的对齐方式，并垂直对齐您的心脏内容。

If you want to see more GIF Flexbox tutorials, or if this tutorial was helpful to you, hit the green heart below or leave a comment.

如果您想查看更多GIF Flexbox教程，或者本教程对您有帮助，请点击下面的绿色图标或发表评论。

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35/

-ms-flexbox