Much like CSS Grid (my other tutorial) Flex Box is quite complex because it consists of not one but two element types: The container & items.

就像CSS Grid (我的其他教程)一样， Flex Box非常复杂，因为它不仅包含一种元素类型，而且包含 两种元素类型： container和items 。

JavaScript Grammar contains the entire language walk-through from the stand point of a complete beginner gradual building in complexity.

JavaScript语法 从完整的初学者逐步构建复杂性的角度出发，包含完整的语言演练。

CSS Visual Dictionary contains a color-coded diagram for every single CSS property in common use for visual speed-learners!

CSS视觉词典 包含每个视觉速度学习者常用的每个CSS属性的颜色编码图！

When I started to learn Flex, I wanted to see everything it was capable of. But, I wasn’t able to find a thorough tutorial showing examples of all Flex properties. So, I created these diagrams with Flex from the bird’s 🐦 eye view.

当我开始学习Flex时，我想看看它能做的一切 。 但是，我找不到完整的教程来展示所有Flex属性的示例。 因此，我从鸟瞰图的角度使用Flex创建了这些图。

That’s everything Flex is capable of. But… let’s go over each diagram individually with comments. By the end of this Flex tutorial you should be up to speed with pretty much the complete picture of what it can do.

这就是Flex的能力。 但是…让我们逐一浏览每个图表并添加注释。 到本Flex教程结束时，您应该已经可以大致了解其功能的全貌。

柔性 (Flex)

Flex is a set of rules for automatically stretching multiple columns and rowsof content across parent container.

Flex是一组规则，用于自动跨父容器拉伸内容的多个列和行。

显示：flex (display:flex)

Unlike many other CSS properties, in Flex you have a main container anditems nested within it. Some CSS flex properties are used only on the parent. Others only on the items.

与许多其他CSS属性不同，在Flex中，您有一个主容器和嵌套在其中的项目。 一些CSS flex属性仅在父级上使用。 其他只在物品上。

You can think of a flex element as a parent container with display:flex. Elements placed inside this container are called items. Each container has a flex-start and flex-end points as shown on this diagram.

您可以将flex元素视为带有display：flex的父容器。 放置在此容器内的元素称为项目。 如下图所示，每个容器都有一个flex-start和flex-end点。

主轴和横轴 (Main-axis and Cross-axis)

While the list of items is provided in a linear way, Flex requires you to bemindful of rows and columns. For this reason, it has two coordinate axis. Thehorizontal axis is referred to as Main-Axis and the vertical is the Cross-Axis.

虽然以线性方式提供项目列表，但是Flex要求您注意行和列。 因此，它具有两个坐标轴。 水平轴称为主轴，垂直轴称为交叉轴。

To control the behavior of content’s width and gaps between that stretchhorizontally across the Main-Axis you will use justify properties. To controlvertical behavior of items you will use align properties.

要控制内容的宽度和在主轴上水平拉伸之间的间隙的行为，您将使用对齐属性。 要控制项目的垂直行为，您将使用align属性。

If you have 3 columns and 6 items, a second row will be automatically createdby Flex to accommodate for the remaining items.

如果您有3列和6项，则Flex将自动创建第二行以容纳其余项。

If you have more than 6 items listed, even more rows will be created.

如果列出的项目超过6个，则将创建更多的行。

How the rows and columns are distributed inside the parent element is determined by CSS Flex properties flex-direction, flex-wrap and a few others that will be demonstrated throughout the rest of this flex tutorial.

父元素内行和列的分布方式由CSS Flex属性flex-direction ， flex-wrap和其他一些属性决定，这些内容将在本Flex教程的其余部分中进行演示。

方向 (Direction)

It’s possible to set direction of the item’s flow by reversing it.

可以通过反转来设置物料流向。

包 (Wrap)

流 (Flow)

When we change flex direction to column, the flex-flow property behaves inexactly the same way as in previous examples. Except this time, they followthe vertical direction of a column.

当我们将flex direction更改为column时， flex-flow属性的行为与之前的示例完全不同。 除这次外，它们遵循列的垂直方向。

证明内容 (justify-content)

I received a lot of requests to clarify the example above. So I created this animation. The original piece from which the diagram was crafted:

我收到了许多澄清以上示例的请求。 所以我创建了这个动画。 制作图表的原始作品：

Hope this clears the fog a bit.

希望这能消除一点雾气。

flex-direction:row; justify-content: flex-start |flex-end |center|space-between |space-around |stretch |space-evenly. In this example we’re using only 3 items per row.

flex-direction：row; 证明内容：flex-start | flex-end | center | space-ween之间| space-around | stretch | space-evenly 。 在此示例中，每行仅使用3个项目。

There is no limit on the number of items you wish to use in flex. These diagrams only demonstrate the behavior of items when one of the listed values is applied to justify-content property.

您希望在flex中使用的项目数量没有限制。 这些图仅演示将列出的值之一应用于justify-content属性时项目的行为。

The same justify-content property is used to align items when flex-direction is column.

当flex-direction为column时，相同的justify-content属性用于对齐项目。

包装挠性线(根据挠性规范) (Packing Flex Lines (according to Flex specification))

Flex specification refers to this as ”packing flex lines.” Basically, it works just like the examples we’ve seen on the previous few pages. Except this time, note that the spacing is between whole sets of items. This is useful when you want to crate gaps around a batch of several items.

挠性规范将此称为“ 包装挠性线” 。 基本上，它的工作方式就像我们在前几页中看到的示例一样。 除这次以外，请注意，间隔位于整个项目集之间。 当您要在一批几件物品之间创建间隙时，这很有用。

Packing Flex Lines (continued.) But now with flex-direction set to column.

包装伸缩线 (续)，但是现在将伸缩方向设置为column 。

对齐项目 (align-items)

align-items controls the align of items horizontally, relative to the parent container.

align-items控制项目相对于父容器水平对齐。

弹性基础 (flex-basis)

flex-basis works similar to another CSS property: min-width outside of flex. It will expand item’s size based on inner content. If not, the default basis value will be used.

flex-basis的工作原理类似于另一个CSS属性：flex外部的min-width。 它将根据内部内容扩展项目的大小。 否则，将使用默认基值。

弹性成长 (flex-grow)

flex-grow, when applied to an item will scale it relative to the sum of the size of all other items on the same row, which are automatically adjusted according the the value that was specified. In each example here the item’s flex-grow value was set to 1, 7 and (3 and 5) in the last example.

flex-grow应用于项目时，将相对于同一行上所有其他项目的大小之和进行缩放，这些项目将根据指定的值自动进行调整。 在每个示例中，在上一个示例中，项目的flex-grow值设置为1、7和(3和5)。

弯曲收缩 (flex-shrink)

flex-shrink is the opposite of flex-grow. In this example value of 7 was used to ”shrink” the selected item in the amount of time equal to 1/7th times the size of its surrounding items — which it will be also automatically adjusted.

flex-shrink与flex-grow相反。 在此示例中，值7用于“缩小”所选项目的时间，其时间等于其周围项目大小的1/7倍-也会自动对其进行调整。

When dealing with individual items, you can use the propertyflex as a shortcut for flex-grow, flex-shrink and flex-basis using onlyone property name.

处理单个项目时，可以使用propertyflex作为仅使用一个属性名称的flex-grow ， flex-shrink和flex-basis的快捷方式。

订购 (order)

Using order property it’s possible to re-arrange the natural order of items.

使用order属性可以重新排列项目的自然顺序。

证明项目 (justify-items)

One last thing for those who are looking to use CSS Grid together with Flex Box… CSS grid’s justify-items is similar to Flex’s justify-content. (The properties described in the above diagram will not work in Flex, but it’s pretty much the grid’s equivalent for aligning cell content.)

对于那些希望使用CSS Grid的人来说，最后一件事 以及Flex Box … CSS网格的 辩护项目类似于Flex的辩护内容 。 (上图中描述的属性在Flex中不起作用，但是在对齐单元格内容时，它几乎等同于网格。)

CSS视觉词典-我的编码书 (CSS Visual Dictionary — My Coding Book)

A complete classic! Check it out guys. All CSS properties in visual format.

完整的经典！ 看看家伙。 视觉格式的所有CSS属性。

You can follow me on Twitter for weekend PDF giveaways.

您可以在Twitter上关注我 周末PDF赠品。

Follow me on Instagram for a quick hit of JavaScript.

在Instagram上关注我，以快速获取JavaScript。

You can follow me on Facebook for free coding stuff.

您可以在Facebook上关注我，获得免费的编码内容。

See my other comprehensive CSS Grid tutorial right here on Medium.

请参阅我的其他综合CSS Grid教程 就在这里。

To get a good idea of how flex works try flex layout editor on this page.

要了解Flex的工作原理，请尝试使用Flex布局编辑器 在本页面。