Description
Flexbox可以将我们从CSS的弊端（如垂直对齐）中拯救出来。
诚然，Flexbox确实实现了这个目标，但要掌握它新的运行模型还是极具挑战性的。
那么，我们就来用动画来了解它的工作原理，以便我们能够使用它来构建更好的布局。
Flexbox的基本原则是：使布局灵活和直观。
为了实现这两个功能，它允许开发者决定容器如何均匀地分配容器的子元素（即项目），包括项目的大小和项目之间的间隔。
这听起来对于实现Flexbox的原则非常给力，让我们来看看在实践中是什么样的。
在本文中，我们将看看5个最常见的Flexbox属性，探讨一下它们做什么、如何使用它们，以及它们在实践中会是什么样子。
属性1：Display: Flex
以下是我们的示例效果：
示例中有一个灰色的容器div，包含四个不同大小的彩色项目，到目前为止，每个项目默认设置为：display: block，因此每个项目都占据其线的整个宽度。
开始使用Flexbox布局，你需要将你的容器变成一个flex容器，这很简单，如下：
#container{
display: flex;
}
可以看出，这并没有很大的改变——表面上，你的项目是内联元素了；但在幕后，你可以做很强大的事情。此时，你的容器元素可以称为flex布局上下文。
现在，你可以开始在这个上下文中定位项目，与传统CSS相比难度更小。
属性2：Flex Direction
Flexbox容器有两个轴：主轴和交叉轴，默认情况如下：
默认情况下，项目沿主轴（从左到右）排列。这就是为什么：一旦你的容器应用display: flex，你的方块默认为水平线。
Flex-direction属性决定主轴的方向（即项目的排列方向）。
#container {
display: flex;
flex-direction: column;
}
在这里有一个重要的区别：
flex-direction:column表示项目在cross axis上对齐，而不是main axis。这使得主轴从水平到垂直。
flex-direction属性还有其他值，比如：row-reverse和column-reverse。
属性3：Justify Content
Justify-content属性定义了项目在主轴上的对齐方式。
这里，你将深入一点了解main/cross axis的区别。首先，让我们回到flex-direction: row 。
#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}有5个值可供Justify Content选取：
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Space-between和Space-around的效果是最直观的，Space-between使得每个项目之间的间隔相等，而不是它与容器之间的间隔。
Space-around使得项目之间的间隔相等——也就是说，最外面的项目与容器之间的间隔是两个项目间隔的一半（每个项目贡献等量的不重叠的margin，从而使空间加倍）。
最后一点：justify-content沿着主轴对齐，而flex-direction切换主轴，当你改动其一的时候，这是很重要的一点。
属性4：Align Items
如果你理解了justify-content，align-items理解起来就相对简单了。
由于justify-content沿着main axis对齐，align-items定义项目在cross axis上如何对齐。
让我们将flex-direction重置为垂直，所以我们的轴看起来像上图一样。
align-items可取5个值：
- flex-start
- flex-end
- center
- stretch
- baseline
前三个类似于 justify-content，所以这里也就没有什么特别的样式了。
不过后面两个就有点不一样了。
stretch表示项目会沿着cross-axis占据整体；而baseline表示项目的第一行文字的基线对齐。
（注意align-items: stretch：我们需要将项目的高度设置为auto，否则height属性会覆盖该stretch。）
对于baseline，请注意，如果你没有设置paragraph tags，各个项目的底部将对齐，如下所示：
为了更好地演示main axes 和 cross axes，我们结合justify-content和align-items两个属性，当justify-content和align-items都设置为center时，flex-direction的值不一样的时候会如何：
对于row，项目沿着水平主轴对齐；对于column，项目沿着垂直主轴对齐。
不管是垂直还是水平情况下，项目都居中对齐，两者不能互换。
属性5：Align Self
Align-self 属性允许手动操作一个特定项目元素的对齐方式，该属性设置在项目上。
当一个项目元素设置了align-self属性后，可覆盖align-items属性。默认设置为auto，则和其他的项目属性一样，表示继承父元素的align-items属性。
#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.让我们来看看这会是什么效果：将align-self应用于两个项目，其余的应用align-items: center和flex-direction: row。
结论
即使我们刚刚了解了Flexbox的一些表面知识，这些命令应该足以处理大多数的基本对齐——并且与你内心的对齐方式匹配。
如果你想查看更多的GIF Flexbox教程，或者如果本教程对你有帮助，请点击下面的绿心或留下评论。
谢谢你的阅读！
原文链接 How Flexbox works — explained with big, colorful, animated gifs