-ms-flexbox_Flexbox的工作原理-用大尺寸，彩色动画gif进行解释

-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