本文图片较多，如有不清楚的地方，可以点击原文链接查看高清大图。另，如有翻译不周之处，请指摘。
原文：
The Complete CSS Flex Box Tutorial
译文：
Flex 盒子与CSS 网格 （Grid）很相似，都十分复杂，这是因为它不止包含一种元素类型，而是两种：container 和 items。
CSS 视觉字典（译者注：原作者推荐的一本讲述CSS属性的付费书籍）
如果想更好地理解Flex的工作原理，可以在此页面上尝试flex 布局编辑器。
当我刚开始学习Flex的时候，我想搞清楚它能做的所有事情，但却始终找不到一本能展示Flex所有属性事例的全面性教材。因此，我以鸟瞰 的方式，用Flex的方式画了以下图表。
这就是Flex能做的所有事情。但是……还是让我们以评论的方式来逐一重温以上图表吧。在本课程结束时，相信你一定会对Flex所能做的事情了如指掌。
Flex
Flex是在父容器中自动伸展多行和多列内容的规则集。
display: flex
与其他CSS属性不同，在Flex布局中，存在一个主container，items嵌入其中。有些CSS Flex属性只作用于父container。有些则只作用于items。
你可以把flex元素看作是带有display:flex属性的父container，而放置在这个container中的元素则叫做items。每个container均有 flex-start 和 flex-end点，如图所示。
主轴和交叉轴
尽管item都是以线性方式排列的，Flex还是要求你注意行和列。因此，Flex有两条坐标轴。水平轴指的是主轴，垂直轴指的是交叉轴。
在主轴上水平延伸的内容具有宽度和间隔，为了控制它们的显示行为，你将会使用到justify相关属性。为了控制item的垂直展示行为，你将会使用align相关属性。
如果你有3列6个item，那么在展示时，Flex将会自动创建第二行来容纳剩余的item。
如果你有多于6个item的展示列表，Flex则会创建更多的行。
行和列如何在父元素中分布是由：flex-direction 、flex-wrap 以及其他几种 Flex 属性决定的，这些属性都将在本教程的余下内容中有所涉及。
Direction（方向）
可以通过倒置的方式来设置 item 流的方向。
Wrap
Flow
当我们把 flex 的方向改为 column，flex-flow 属性会和前例中的表现一致。只是这一次，他们会沿着列中的垂直方向展示。
justify-content
很多读者要求我详细解释上面的例子。因此，我做了这个动画。动画中的原始片段来自于以上图表（译者注：这幅gif图的展示似乎有些问题，如欲查看更好的效果，请戳：https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc）
希望此图可以为诸君拨开迷雾。
flex-direction:row; justify-content: flex-start |flex-end |center|space-between |space-around |stretch |space-evenly. 在这个例子中，我们只在每一行使用列3个item。
flex不会限制你放置item的数量。这些图表只表明了当 item 展示列表中的某一项设置了 justify-content 属性值时，该列表的展示行为。
当 flex-direction 属性值是column时，相同的 justify-content 属性还可以用来对齐item。
Packing Flex Lines (根据 Flex 规范)
Flex 规范将这叫做“packing flex lines”。基本上，它就是如上图中的例子那样生效的。只是这次，需要注意间隔是在不同项目集间出现的。如果你想在一批项目中创建间隔，这个特性会显得十分有效。
Packing Flex Lines (继续)。现在，将 flex-direction 的值设置成了 column.
align-items
align-items 属性以父container为基准，控制着水平方向上的 item 的垂直对齐情况。
flex-basis
flex-basis 的工作原理类似于 Flex 外的另一个CSS属性：min-width。该属性将根据其内部内容来扩展item的尺寸。如果没有该属性，将会使用默认值。
flex-grow
当一个 item 应用 flex-grow 属性时，该属性将会根据同一行中其余 item 的尺寸总和来对该 item 进行放大，调整会依据规定的属性值自动进行。在上图中的例子中，这些元素的 flex-grow 属性值分别被设置成了：1、7、3 和 5（最后一例中）.
flex-shrink
flex-shrink 和 flex-grow 相反。在上图的例子中，属性值“7”是用来“缩小”选中 item 的，表示该 item 的尺寸是周围 item 的1/7倍——调整也将自动进行。
当处理独立的 item 时，你可以使用 flex 这个属性作为 flex-grow、flex-shrink 和 flex-basis 三个属性的简写。
order
使用 order 属性会对 item 的原始顺序进行重排。
justify-items
最后一点是和那些想把 CSS Grid 和Flex 盒子混用的人说的……CSS grid 的 justify-items和Flex的 justify-content 属性很类似（上面的图表中所描述的属性在Flex布局中不生效，但对于用 Grid 对齐内容来说却足够了）。
