[译]Flexbox如何工作——结合清晰炫彩的动画gif解析

[HecateDK]

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